Los pseudoelementos son un tipo de selector CSS que permite diseñar una parte específica de los elementos seleccionados. Gracias a algunos de ellos es posible añadir contenido estético a los elementos del documento HTML.
La sintaxis de los pseudoelementos es similar a la de las pseudoclases: primero se introduce el selector para indicar el elemento al que se quiere hacer referencia, y después, a su derecha, se introduce la palabra clave del pseudoelemento junto con el prefijo de dos puntos dobles (::). Veamos la sintaxis:
selector::pseudoelemento {
propiedad: valor;
}
Los pseudoelementos se pueden usar, por ejemplo, para cambiar la fuente de la primera línea, o la primera letra de un párrafo; pero también para añadir contenido estético antes y después del elemento seleccionado. Por tanto, se puede deducir que tienen un gran potencial a nivel de diseño web.
Lista de pseudoelementos descritos en este artículo:
::before::after::first-line::first-letter::marker::placeholder::selection::file-selector-button
Los pseudoelementos ‘::before’ y ‘::after’
Los pseudoelementos ::before y ::after permiten agregar contenido estético a un elemento HTML mediante la propiedad content. Puede usarse tanto para agregar contenido textual antes y después de un elemento existente como para añadir estilos adicionales sin tener que crear elementos nuevos.
La propiedad content es muy usada para añadir contenido a cualquier elemento HTML, por lo que admite varios tipos de parámetros: cadenas de texto, códigos de caracteres Unicode, valores de atributos HTML, imágenes indicadas a través de una URL válida y algunas palabras clave.
Vamos a ver un ejemplo. Queremos crear una citación de línea en la que, antes y después del texto, se incluya por defecto los símbolos de las comillas angulares (« y »). Para ello lo que haremos primero es crear dos reglas CSS, una para indicar la comilla previa y otra para indicar la comilla posterior:
.cml q::before {
color: red;
content: "«"
}
.cml q::after {
color: red;
content: "»"
}
El código HTML será el siguiente:
<p class="cml">Este párrafo contiene una <q>citación en línea</q>.</p>
Resultado:
Este párrafo contiene una
citación en línea.
En este ejemplo se ha introducido las comillas angulares directamente como valor de la propiedad content. Para usar una secuencia hexadecimal Unicode, se debe preceder el código con \ (barra inversa). Por ejemplo, para introducir el punto redondo (•), se usa el código \2022. De hecho, algunos sitios web insertan iconos a través de fuentes utilizando sus códigos hexadecimales.
Para hacer uso del atributo HTML dentro de la propiedad content, debe usarse la siguiente sintaxis: content: attr(). Dentro del paréntesis se introduce el atributo que se necesite; por ejemplo: href, title o data-*.
Ejemplos de uso:
a::after {
content: attr(href);
}
Este ejemplo mostraría literalmente la URL justo después de cada enlace. Esto puede ser especialmente útil en una hoja de estilos destinada a impresión, motivo por el cual se perdería la información del enlace.
Veamos otro ejemplo:
a:hover::after {
content: attr(title);
}
Este ejemplo muestra el texto del título del enlace (atributo title) cuando el usuario pasa el cursor por encima del enlace (pseudoclase :hover). Por tanto, puede ser muy útil para mostrar información de ayuda para el usuario; además, con la ventaja de no tener que usar JavaScript.
Los pseudoelementos ‘::first-line’ y ‘::first-letter’
El pseudoelemento ::first-line permite aplicar estilos CSS a la primera línea de un párrafo. En este punto es importante remarcar que la longitud de la primera línea depende de muchos factores: el ancho del elemento contenedor, el ancho del documento, el tipo de fuente, el tamaño de la fuente, etc.
Las propiedades que se pueden modificar mediante este pseudoelemento son todas las que están relacionadas con las fuentes, todas las que están relacionadas con el fondo, y las que están relacionadas con el texto, como el color, la decoración, el alto de línea o el sombreado del texto.
Para aplicar estilos CSS a la primera letra de la primera línea se usa el pseudoelemento ::first-letter, que también debe usarse en elementos de bloque, como puede ser un párrafo. La combinación de este pseudoelemento con el anterior permite crear diseños creativos.
En este caso, las propiedades que se le pueden aplicar son todas las relativas a las fuentes, fondo, márgenes, relleno, borde, color y texto. También admite algunas propiedades que tienen que ver con el posicionamiento.
Veamos un ejemplo:
.fl::first-line {
color: red;
}
.fl::first-letter {
border: 1px solid red;
float: left;
font-size: 2em;
margin: 5px 10px 0 0;
padding: 5px;
}
Resultado:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
El pseudoelemento ‘::marker’
El pseudoelemento ::marker permite aplicar estilos CSS a los marcadores de los elementos de una lista HTML, es decir, el elemento <li>. Se trata de un pseudoelemento que funciona tanto para las listas ordenadas (elemento <ol>) como para las listas no ordenadas (elemento <ul>).
Este selector admite todas las propiedades CSS relativas a fuentes y color, las de dirección de texto, las que están relacionadas con animación y transiciones, y finalmente content y white-space.
Ejemplo de código CSS de aplicación del pseudoelemento ::marker:
.mk li::marker {
color: red;
}
Como resultado, aparecerá un círculo rojo:
- HTML
- CSS
- JS
El pseudoelemento ‘::placeholder’
El pseudoelemento ::placeholder tiene la finalidad de estilizar el texto provisional (de ayuda) que se muestra en algunos elementos HTML relacionados con los formularios, como puede ser el caso de un <input> o un <textarea>. El texto desaparece cuando el usuario empieza a escribir.
El texto que se pretende estilizar debe estar declarado mediante el atributo HTML placeholder, cuyo valor será una cadena de texto. En la mayoría de casos, dicho texto aparece en un color gris claro, siendo más claro que el color del texto normal con el fin de dar a entender que es de ayuda.
Ejemplo de código HTML de uso del atributo placeholder:
<input placeholder="Suscríbete">
Ejemplo de código CSS para estilizar placeholder:
::placeholder {
color: darkgreen;
}
Resultado:
El pseudoelemento ‘::selection’
El pseudoelemento ::selection permite cambiar el diseño del texto que ha sido seleccionado por parte del usuario. Lo habitual es modificar el color del fondo y del texto, pero puede dejarse los valores por defecto. Para el navegador web Firefox debe usarse ::moz-selection en su lugar.
Ejemplo de código CSS para cambiar el color de la selección:
.sel::selection {
background: darkred;
color: white;
}
Resultado:
Selecciona este texto.
El pseudoelemento ‘::file-selector-button’
El pseudoelemento ::file-selector-button permite modificar el estilo del botón para seleccionar archivos, creado mediante un elemento HTML <input> que tenga el atributo type='file'. Es habitual modificar el color de fondo, el color del texto, los bordes y el redondeo de las esquinas.
Ejemplo de código CSS para modificar el botón de seleccionar archivos:
.file::file-selector-button {
background: teal;
border-radius: 4px;
border-width: 1px;
color: white;
padding: 5px 10px;
}
Resultado:
