Academia
Blog

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:

  1. ::marker { }.
  2. ul li::marker { }.
  3. ul ::marker { } El espacio después de ul es intencional.
  4. ol ::marker { }. El espacio después de ol es 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

Compartir en: Facebook Twitter