Académique Documents
Professionnel Documents
Culture Documents
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
::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:
::after
::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
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.