05. CSS, Pseudoelementos.Los pseudoelementos.

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

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;
}