Introduccin a pseudo-elementos en CSS3

Cualquier idea para modificar el diseo de nuestra web es vlida, pero debes tener
cuidado de no caer en malas prcticas.
Dicho esto, recuerdo que hace algunos aos haca cualquier truco mgico para
que mis textos y contenidos se vieran como yo quera. No me importaba la
semntica, la estructura y mucho menos ser atractivo para un buscador. As que
siempre encontraba un desastre de cdigo que slo yo entenda. 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 pseudoelementos.
Los pseudo-elementos forman parte de nuestras herramientas desde la versin
2.1 de CSS; nos permiten agregar estilos y modificar textos o elementos para
hacer nuestra web un lugar ms atractivo y agradable para los usuarios.A
continuacin, explicar de la forma ms simple y concisa cada uno de los pseudoelementos, incluyendo su sintaxis y un ejemplo de uso. Es importante tomar en
cuenta que si aprendes a manejarlos correctamente, no slo te sacaran de apuros,
tambin te ahorrarn tiempo acomodando textos, imgenes y diversos elementos
de tu pgina web. Con el tiempo podrs eliminar algunas capas divs de tu cdigo
html logrando una mejor optimizacin semntica.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 tamao
y el color. Con esta herramienta no cortars la primera letra de cada palabra;
hacindola ms visible y entendible para los usuarios y adems sin afectar la
optimizacin para buscadores. Ejemplo:
p::first-letter{color: #000000; font: 300% Adobe Caslon Pro Bold;}

::first-line

El pseudo-elemento ::first-line modifica la primera lnea del texto. En este caso,

en mi cdigo, 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 bsico 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 lnea de cdigo que indica el
tamao de letra con </h1>; 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 diseo de nuestra web es vlida.</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 diseo de nuestra web es vlida.</h1>

Para concluir y en forma de pequeo resumen para tener completamente claros

los conceptos, tenemos 5 tipos de pseudo-elementos:::first-letter: modifica la
primer letra de nuestros prrafos.::first-line: modifica la primer lnea de nuestros
prrafos .::selection: modifica la seleccin que hacemos con nuestro
mouse.::after: inserta contenido despus de cualquier elemento.
Ya sea un div, un prrafo, un enlace, etc.::before: al igual que ::after, inserta

contenido en cualquier elemento pero al inicio.Antes del nombre de cada pseudoelemento encontrars un doble dos puntos (::). Esta forma de escribirlos se
introdujo en CSS3 y se utiliza para diferenciar entre pseudo-clases y pseudoelementos.