Tengo un problema con unas clases que he creado, que al crear un hover
no me cambia el color de fondo. Se trata de usar un código ascii
en css
que al ejecutarlo cambie. Solo puedo transformar, escalar, rotar, pero cambiar el color de la fuente no puedo.
El problema mas especifico es que he usado la propiedad content
de css
y quería cambiar el color del mismo código ascii
.close::before {
content: '\0271a';
color: #919191;
float: right;
font-size: 1.25rem;
font-weight: bold;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.close:hover::after {
color: black;
font-size: 1.25rem;
float: right;
font-weight: bold;
cursor: pointer;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<span class="close"></span>
</body>
</html>
Lo mas cercano que he hecho, es hacer otra forma y me sale uno igual pero al lado del otro. Lo que necesito es cambiar una cruz de color de gris al negro.
Os lo demuestro.
.close::before {
content: '\0271a';
color: #919191;
float: right;
font-size: 1.25rem;
font-weight: bold;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.close:hover::after {
content: '\0271a';
color: black;
font-size: 1.25rem;
float: right;
font-weight: bold;
cursor: pointer;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<span class="close"></span>
</body>
</html>