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.
Es buena práctica el uso de pseudo-elementos
Lo he usado para colocar el signo pesos a los precios de algún producto de una tienda online. Esto lo hice haciendo caso a la sugerencias dadas en Platzi, que dice que si se trae unos valores de una base de datos y los mostramos en una página web, vemos que el signo "$" no tiene valor semántico para el buscador entonces es mejor usar un pseudo elemento para colocarlo y dar a entender al usuario o cliente para quien si tiene un valor y un sentido ver el símbolo de "$" en la pantalla que le indicará el precio de un producto.
Muy Bueno, Gracias.
Best Teacher ❤️
Excelente a poner en práctica!
Les dejo la documentación de Mozilla Developer Network para pseudoelementos y pseudoclases
Gracias por aclarar muchas dudas y mostrar el uso de cada uno.
valioso resumen... a ponerlo en practica!
Pasaba por aquí para refrescar conocimientos de pseudoelemntos y me quedó super claro con ésta lectura :D
Muchas gracias por los Tips, Tienes toda la razon. ayuda mucho en el momento de colocar tantos Div. :D muchas gracias Leonidas
Los pseudo elementos dependen del navegador? Que pasa si algunos pseudo elementos no existen en otro navegador?
¿Cómo se empieza a usar CSS3? es decir, ¿en el link que se crea solo se especifica que el documento es .css3 o hay algún tipo de librería?
(Soy nuevo en esto así que si suena muy tonta la pregunta, espero me entiendan)
Por otra parte, en el pseudo-elemento ::first-line no se seleccionó la primera letra para cambiarle el color. ¿Esto se debe a que un pseudo-elemento no puedo sobre escribir otro?
Cuando menciona "Esta forma de escribirlos se introdujo en CSS3 y se utiliza para diferenciar entre pseudo-clases y pseudo-elementos." ¿Cómo es la estructura de una pseudo-clase?
Excelente, es bueno aprender siempre cosas nuevas!!
