Los selectores :before y :after en CSS se usan para agregar contenido antes y después de un elemento. El :hover es pseudo-clase y :before & :after son pseudo-elementos. En CSS, los pseudoelementos se escriben después de la pseudoclase.
Sintaxis:
a:hover::before {
// CSS Property
}
a:hover::after {
// CSS Property
}
En CSS3, los dos puntos dobles (::) se utilizan para indicar un pseudoelemento. Para IE8 o anterior, se usa un solo dos puntos (sintaxis CSS2).
Ejemplo 1: este ejemplo utiliza la condición de desplazamiento para a:before y a:after en un elemento.
html
<!DOCTYPE html>
<html>
<head>
<title>
:hover condition for a:before
and a:after
</title>
<!-- Style to add hover condition -->
<style>
a:hover::before {
content: "Before -";
}
a:hover::after {
content: "-after";
}
</style>
</head>
<body>
<a href="#" > Hover here </a>
</body>
</html>
Producción:
HTML antes de que el mouse se mueva:
Después de que el ratón se mueva:
Ejemplo 2: este ejemplo utiliza la condición de desplazamiento para a:before y a:after en un elemento.
html
<!DOCTYPE html>
<html>
<head>
<title>
:hover condition for a:before
and a:after
</title>
<style>
a:hover::before {
content: "Before -";
background-color: green;
}
a:hover::after{
content: "-after";
background-color: green;
}
</style>
</head>
<body>
<a href="#" > GeeksForGeeks </a>
</body>
</html>
Producción:
HTML antes de que el mouse se mueva:
Después de que el mouse se mueva :
CSS es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por aman neekhara y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA