Pseudo-elementos en CSS
En la publicación anterior Pseudoclases y Pseudoelementos en CSS comenté que es muy común trabajar en CSS con pseudoelementos y pseudoclases sin saber qué son exactamente o en qué se diferencian entre sí. En dicha publicación hice un resumen interesante para conocer su estructura y sintaxis pero aquí le daré la atención total a los pseudoelementos.
Vamos a comenzar.
Before (antes) y After (después)
En pseudoelemento se escribiría así ::before y ::after
Recuerda que todo se origina en HTML, debes conocer lo que tenemos allí escrito para aplicar con éxito los pseudoelementos. La idea es agregar contenido a partes del documento, en otras palabras tenemos algo existente con la posibilidad de agregar visualmente un elemento antes o después.
Veamos un ejemplo:
¿Por qué querrías utilizar contenido generado? Por ejemplo, es posible que desee indicar qué campos de formulario son obligatorios agregando contenido después de su etiqueta:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pseudoelemento</title>
<style>
p::after {
content: '[.....]';
}
</style>
</head>
<body>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</body>
</html>
El resultado sería un párrafo con [.....] al final.
<!--
Lorem ipsum, dolor sit amet consectetur adipisicing elit.[.....]
-->
Puedes colocar elementos después de un input, enlace y cualquier otro control HTML. Piensa en esto como en un prefijo y un sufijo, es exactamente lo que agregas antes (before) o después (after) para ser usada como texto auxiliar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Before - After</title>
<style>
p.quote::before {
content: "\"";
font-size: 64px;
}
p.quote::after {
content: "...";
}
</style>
</head>
<body>
<p class="quote">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</body>
</html>
Aquí describo que quiero afectar a los párrafos con la clase .quote y aplicarles un contenido antes y después. En este caso una comilla y tres puntos al final.
Primera letra (first-letter)
No todos los pseudoelementos inyectan contenido, en este caso ::first-letter trabaja con lo que existe y directamente nos permite afectar a la primera letra de un párrafo.
p::first-letter {
font-size: 64px;
}
Podemos lograr un efecto revista o capitulo de libro aplicando mayor tamaño, estilo, formato y color a la primera letra de un texto.
Puedes experimentar aplicando un float: left;, estilo, interlineado y márgenes. El resultado final depende del diseño.
Primera línea (first-line)
Con este pseudoelemento podemos afectar a toda una línea de un párrafo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First line</title>
<style>
p::first-line {
color: #00aced;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor, sit, amet consectetur adipisicing elit.
<br>
Voluptates, sed ut ex a magni distinctio, veritatis deserunt nihil.
</p>
</body>
</html>
El ejemplo acá es sencillo, hemos configurado que la primera línea tenga un color diferente. La primera línea dependerá del ancho de la pantalla o de dónde este se encuentre aunque puedes forzar la primera línea con la etiqueta <br> o <hr>.
Puedes combinar a este pseudoelemento ::first-line con las siguientes propiedades:
-
color. -
background. -
text-decoration. -
letter-spacing. -
line-height. -
text-transform. -
text-shadow. -
word-spacing.
Y las propiedades lógicas respecto al texto.
Selección con el mouse (selection)
Este pseudoelemento nos permite aplicar estilo al momento de resaltar.
p::selection {
background: #00aced;
}
Cuando seleccionamos una porción de texto con nuestro mouse veremos como este se resalta, existe por supuesto un color de fondo y texto por defecto y nosotros lo podemos alterar.
De igual forma puedes trabajar con propiedades lógicas respecto al texto aunque lo común es cambiar el color de fondo y texto.
Viñeta
En este caso usamos ::marker, con este pseudoelemento podemos afectar a una viñeta de una lista.
Su sintaxis sería la siguiente:
-
::marker { }. -
ul li::marker { }. -
ul ::marker { }El espacio después deules intencional. -
ol ::marker { }. El espacio después deoles intencional.
Entendiendo estas distintas formas podemos ver que que podemos hacer combinaciones al momento de aplicar. El objetivo es afectar a las viñetas o números de las listas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Marker</title>
<style>
ul ::marker {
color: #00aced;
}
ol ::marker {
color: #f00;
}
</style>
</head>
<body>
<ul>
<li>Lorem ipsum dolor</li>
<li>Lit. Ipsam veritatis ratione voluptate quos</li>
</ul>
<ol>
<li>Lorem ipsum dolor</li>
<li>Lit. Ipsam veritatis ratione voluptate quos</li>
</ol>
</body>
</html>
Toma en cuenta que puedes hacer diferentes combinaciones.
ul {
list-style: square;
}
ul ::marker {
color: #00aced;
}
Otra forma sería la siguiente:
ul ::marker {
content: '😎';
}
ul {
list-style: '---';
}
Veremos el emoji si el navegador lo soporta, en caso de incompatibilidad veremos como viñeta los signos ---. Para lograr un gran resultado dependemos del diseño propuesto.
Placeholder
En HTML podemos escribir una caja de texto con un mensaje provisional, ese es el placeholder.
<input type="text" placeholder="Nombre y Apellido">
A este texto provisional podemos aplicarle algún estilo. Recordemos que cada elemento tiene un estilo predeterminado.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input::placeholder {
color: blue;
}
</style>
</head>
<body>
<input type="text" placeholder="Nombre y Apellido">
</body>
</html>
Como se puede ver dependemos del diseño para lograr un gran resultado. Seguiremos aprendiendo de CSS en Rimorsoft