Los pseudoelementos CSS hacen referencia a elementos que no describen un estado especial, sino que, permiten añadir nuestros estilos a una parte concreta del documento. Siempre se indican con un doble dos puntos (::
).
Aquí tenemos una lista de los pseudoelementos más utilizados, junto con su características básicas.
Pseudoelemento | Característica |
---|---|
::before | Los estilos se aplican antes del elemento. |
::after | Los estilos se aplican después del elemento. |
::first-letter | Los estilos se aplican en la primera letra del texto. |
::first-line | Los estilos se aplican en la primera línea del texto. |
::placeholder | Aplica estilos al texto de referencia de un input |
Tabla de contenidos
Generar contenido
Tanto el pseudoelemento ::before
como ::after
se utilizan para colocar contenido antes o después del elemento indicado. Junto con ellos, siempre se ha de adjuntar, dentro de la regla, la propiedad content
, la cual contiene el contenido que se debe insertar.
La propiedad content
, puede contener un string (content: "String";
), un atributo (content: attr(class);
) o la url
de una imagen (content: url(../img/image.jpg);)
. También se puede indicar un contenido vacío para, por ejemplo indicar un degradado (content: " ";
).
.hero::before {
content
: "";
position
: absolute;
top
: 0;
left
: 0;
width
: 100%;
height
: 100%;
background-image
: linear-gradient(
90deg,
rgba(52,57,62,.5),
rgba(52,57,62,.5)
);
}
En el ejemplo anterior, insertamos un degradado a un contenedor de clase .hero
en el cual hay una imagen, para conseguir curiosos efectos.
Primera letra y primera línea
Para cambiar los estilos de la primera letra y la primera línea de parágrafo haremos servir respectivamente ::first-letter
y ::first-line
.
Podrías implementar un texto en el cual la primera letra tenga una tamaño mayor y la primera línea tenga más peso así:
p { font-size: 18px; color: #444; width: 300px } p::first-letter { color: #000; font-size: 30px; } p::first-line { font-weight: bold; }

Otro de los pseudoelementos es ::placeholder
, el cual se utiliza para dar formato al texto interior que puede contener los elementos <input>
de un formulario.
En el ejemplo, pintaremos el texto interior o placeholder
de color rojo:
input::placeholder {
color: red;
}

Deja una respuesta