8.1 Tipos de pseudo-elementos
Los pseudo-elementos en CSS permiten estilizar partes específicas de los elementos, como la primera letra, la primera línea o añadir contenido antes o después de un elemento. Ofrecen posibilidades adicionales para la estilización sin necesidad de cambiar la estructura HTML. Los pseudo-elementos se representan con dos puntos dobles (::).
Pseudo-elementos principales:
::before::after::first-letter::first-line
8.2 Pseudo-elemento ::before
El pseudo-elemento ::before añade contenido antes del contenido de un elemento. Se usa con frecuencia para
añadir elementos decorativos, íconos o texto adicional.
Sintaxis:
selector::before {
content: "" | "texto" | url() | counter | attr();
propiedad: valor;
}
En el campo content se especifica el código html que se quiere añadir.
/* Añade una flecha antes de cada elemento de la lista */
li::before {
content: "→ ";
color: red;
}
<ul>
<li>Primer elemento de la lista</li>
<li>Segundo elemento de la lista</li>
<li>Tercer elemento de la lista</li>
</ul>
8.3 Pseudo-elemento ::after
El pseudo-elemento ::after añade contenido después del contenido de un elemento. Se usa con frecuencia para
añadir elementos decorativos, íconos o texto adicional.
Sintaxis:
selector::after {
content: "" | "texto" | url() | counter | attr();
propiedad: valor;
}
En el campo content se especifica el código html que se quiere añadir.
/* Añade un punto después de cada elemento de la lista */
li::after {
content: " •";
color: blue;
}
<ul>
<li>Primer elemento de la lista</li>
<li>Segundo elemento de la lista</li>
<li>Tercer elemento de la lista</li>
</ul>
8.4 Pseudo-elemento ::first-letter
El pseudo-elemento ::first-letter se aplica a la primera letra de un elemento. Se usa con frecuencia para
crear letras iniciales decorativas en los párrafos.
Sintaxis:
selector::first-letter {
content: "" | "texto" | url() | counter | attr();
propiedad: valor;
}
Ejemplo:
/* Aumenta y cambia el color de la primera letra de cada párrafo */
p::first-letter {
font-size: 2em;
color: green;
}
<p>Este es un ejemplo de texto en un párrafo.</p>
<p>Otro ejemplo de texto en un párrafo.</p>
8.5 Pseudo-elemento ::first-line
El pseudo-elemento ::first-line se aplica a la primera línea de un elemento. Se usa con frecuencia
para estilizar la primera línea de un párrafo.
Sintaxis:
selector::first-line {
content: "" | "texto" | url() | counter | attr();
propiedad: valor;
}
Ejemplo:
/* Cambia el color y hace negrita la primera línea de cada párrafo */
p::first-line {
color: navy;
font-weight: bold;
}
<p>
Este es un ejemplo de texto en un párrafo que contiene suficiente texto para dividirse en varias líneas, demostrando cómo funciona el pseudo-elemento ::first-line. La primera línea de cada párrafo será destacada en negrita y color navy, para captar la atención del lector. Este efecto se logra mediante la regla CSS que hemos definido arriba.
</p>
<p>
Ten en cuenta que la estilización se aplica solo a la primera línea, independientemente de su longitud. El resto del texto en el párrafo mantiene su estilo original. Esto puede ser útil para resaltar puntos clave o crear un ritmo visual en el texto.
</p>
GO TO FULL VERSION