CSS - Pseudoelementos
Los pseudoelementos CSS se utilizan para agregar efectos especiales a algunos selectores. No es necesario utilizar JavaScript ni ningún otro script para utilizar esos efectos. Una sintaxis simple de pseudo-elemento es la siguiente:
selector:pseudo-element {property: value}Las clases CSS también se pueden usar con pseudo-elementos -
selector.class:pseudo-element {property: value}Los pseudoelementos más utilizados son los siguientes:
| No Señor. | Valor y descripción |
|---|---|
| 1 | :first-line Utilice este elemento para agregar estilos especiales a la primera línea del texto en un selector. |
| 2 | :first-letter Utilice este elemento para agregar un estilo especial a la primera letra del texto en un selector. |
| 3 | :before Utilice este elemento para insertar contenido antes de un elemento. |
| 4 | :after Utilice este elemento para insertar contenido después de un elemento. |
El: pseudo-elemento de primera línea
El siguiente ejemplo demuestra cómo utilizar el elemento : first-line para agregar efectos especiales a la primera línea de elementos del documento.
<html>
<head>
<style type = "text/css">
p:first-line { text-decoration: underline; }
p.noline:first-line { text-decoration: none; }
</style>
</head>
<body>
<p class = "noline">
This line would not have any underline because this belongs to nline class.
</p>
<p>
The first line of this paragraph will be underlined as defined in the
CSS rule above. Rest of the lines in this paragraph will remain normal.
This example shows how to use :first-line pseduo element to give effect
to the first line of any HTML element.
</p>
</body>
</html>Producirá el siguiente enlace:
El pseudo-elemento: primera letra
El siguiente ejemplo demuestra cómo utilizar el elemento : first-letter para agregar efectos especiales a la primera letra de los elementos del documento.
<html>
<head>
<style type = "text/css">
p:first-letter { font-size: 5em; }
p.normal:first-letter { font-size: 10px; }
</style>
</head>
<body>
<p class = "normal">
First character of this paragraph will be normal and will have font size 10 px;
</p>
<p>
The first character of this paragraph will be 5em big as defined in the
CSS rule above. Rest of the characters in this paragraph will remain
normal. This example shows how to use :first-letter pseduo element
to give effect to the first characters of any HTML element.
</p>
</body>
</html>Producirá el siguiente enlace negro:
El: antes del pseudo-elemento
El siguiente ejemplo demuestra cómo usar el elemento : before para agregar contenido antes de cualquier elemento.
<html>
<head>
<style type = "text/css">
p:before {
content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
</body>
</html>Producirá el siguiente enlace negro:
El: después del pseudo-elemento
El siguiente ejemplo demuestra cómo usar el elemento : after para agregar contenido después de cualquier elemento.
<html>
<head>
<style type = "text/css">
p:after {
content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
</body>
</html>Producirá el siguiente enlace negro: