Introducción a pseudo-elementos en CSS3

Cualquier idea para modificar el diseño de nuestra web es válida, pero debes tener cuidado de no caer en malas prácticas. 

Dicho esto, recuerdo que hace algunos años hacía cualquier “truco mágico” para que mis textos y contenidos se vieran como yo quería. No me importaba la semántica, la estructura y mucho menos ser atractivo para un buscador. Así que siempre encontraba un desastre de código que sólo “yo” entendía. Y no fue hasta que entre cursos, tutoriales y charlas con otros desarrolladores, logré cambiar esto.Con la experiencia que trajo consigo el tiempo, descubrí los pseudo-elementos.

Los pseudo-elementos forman parte de nuestras herramientas desde la versión 2.1 de CSS; nos permiten agregar estilos y modificar textos o elementos para hacer nuestra web un lugar más atractivo y agradable para los usuarios.A continuación, explicaré de la forma más simple y concisa cada uno de los pseudo-elementos, incluyendo su sintaxis y un ejemplo de uso. Es importante tomar en cuenta que si aprendes a manejarlos correctamente, no sólo te sacaran de apuros, también te ahorrarán tiempo acomodando textos, imágenes y diversos elementos de tu página web. Con el tiempo podrás eliminar algunas capas divs de tu código html logrando una mejor optimización semántica.¡Comencemos!

::first-letter

El pseudo-elemento “::first-letter” modifica la primera letra del texto. En este caso es la letra C. De esta manera le podemos cambiar el tipo de fuente, el tamaño y el color. Con esta herramienta no cortarás la primera letra de cada palabra; haciéndola más visible y entendible para los usuarios y además sin afectar la optimización para buscadores. Ejemplo:

	p::first-letter{color: #000000; font: 300% Adobe Caslon Pro Bold;}

::first-line

El pseudo-elemento “::first-line” modifica la primera línea del texto. En este caso, en mi código, la cambié por el color azul. Ejemplo:

	p::first-line{ color: #0000ff;}

::selection

El pseudo-elemento “::selection” nos permite cambiar el color de los textos que seleccionemos con el cursor del mouse. En este caso agregamos “::-moz-selection” para decirle a nuestro navegador Mozilla Firefox que vamos a utilizar este elemento. De esta forma, nos permitirá jugar con el color del texto y del fondo del mismo. Así es como podemos darle diferentes tonalidades a cada componente.  Ejemplo:

::-moz-selection{ /* Codigo para Firefox */
	color: blue;
	background: #afcfff;
} 
::selection{
	color: blue;
	background: yellow;
}

En la siguiente imagen podemos ver el soporte básico para este pseudo-elemento.

::after

El pseudo-elemento “::after” permite agregar una imagen o un elemento al finalizar el texto. En este caso, cada vez que terminemos la línea de código que indica el tamaño de letra con ; este agregará la imagen que prefiera, aquí llamada “imagen.png”. Ejemplo:

CSS

	h1::after{content: url(imagen.png);}

HTML

<h1>Cualquier idea para modificar el diseño de nuestra web es válida.</h1>

::before

El pseudo-elemento “::before” nos permite agregar una imagen o elemento al iniciar el texto. Ejemplo:

CSS

h1::before{content: url(imagen.png);}

HTML

<h1>Cualquier idea para modificar el diseño de nuestra web es válida.</h1>

Para concluir y en forma de pequeño resumen para tener completamente claros los conceptos, tenemos 5 tipos de pseudo-elementos:::first-letter: modifica la primer letra de nuestros párrafos.::first-line: modifica la primer línea de nuestros párrafos .::selection: modifica la selección que hacemos con nuestro mouse.::after: inserta contenido después de cualquier elemento.

Ya sea un div, un párrafo, un enlace, etc.::before: al igual que ::after, inserta contenido en cualquier elemento pero al inicio.Antes del nombre de cada pseudo-elemento encontrarás un doble dos puntos (::). Esta forma de escribirlos se introdujo en CSS3 y se utiliza para diferenciar entre pseudo-clases y pseudo-elementos.