Conceptos Principales, Pseudo Elements (Pseudo-Elementos)

¿Qué son los pseudo-elements en css?

Los pseudo-elementos en CSS son una poderosa herramienta que permite a los diseñadores web crear efectos y estilos adicionales en elementos HTML sin necesidad de modificar directamente el contenido del documento. Se representan mediante dos puntos y se utilizan para seleccionar partes específicas de un elemento, como el primer párrafo de un div o el primer enlace dentro de un menú. Los pseudo-elementos más comunes son ::before y ::after, que permiten agregar contenido antes o después del contenido existente de un elemento. También se pueden utilizar para aplicar estilos, como fondos, bordes o animaciones, a partes específicas de un elemento. En resumen, los pseudo-elementos son una herramienta esencial para la creación de diseños web más sofisticados y personalizados.

before y after (Antes y después)

Los pseudo-elementos ::before (antes) y ::after (después) se pueden estilizar utilizando los modificadores before y aafter.

En el siguiente ejemplo vamos a agregar un asterisco color rojo enseguida del label Correo Electrónico dentro de un formulario.

<div class="p-10 bg-slate-300 min-h-screen">
    <form class="bg-white rounded-xl p-5 shadow-md">
        <h1 class="text-2xl font-bold mb-3">Registro</h1>

        <div class="form-group">
            <label
                class="block mb-2 font-normal text-xl after:content-['*'] after:ml-1 after:text-pink-500 after:font-bold"
                >Correo Electrónico:</label
            >
            <input
                type="email"
                class="border border-gray-300 outline-none font-sans text-gray-500 rounded w-full px-3 py-2"
                placeholder="Tu dirección de correo"
            />
        </div>
    </form>
</div>

La clave para entender el ejemplo es el modificador after:content-['*'] para entender que el contenido a incluir es un asterisco ‘*’, que puede ser reemplazado por otro caractér, una palabra o incluso un emoji. Cuando no se incluye un valor, este toma por default el valor '' para el content.

Link del ejemplo

¿Cómo personalizar la apariencia del texto placeholder?

Mediante Tailwind podemos personalizar el estilo del texto placeholder, utilizando el modificador placeholder. De igual manera que trabajamos como con cualquier texto, podemos modificar las características del placeholder de un campo.

En el siguiente ejemplo vamos a convertir el placeholder de un campo email en color gris y negritas.

<form class="bg-white p-10 rounded-xl">
    <div class="form-group">
        <label class="text-lg font-medium block mb-3">Correo Electrónico</label>
        <input
            type="email"
            placeholder="[email protected]"
            class="border p-3 rounded outline-none w-1/2 placeholder:text-gray-400 placeholder:font-bold"
        />
    </div>
</form>

Link del ejemplo

¿Cómo personalizar la apariencia del botón input file?

Para personalizar la apariencia del campo input file utilizando Tailwind CSS usamos el modificador file.

<form class="bg-white rounded shadow-md p-5">
    <input
        type="file"
        class="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-violet-50 file:text-violet-700 hover:file:bg-violet-300 hover:file:cursor-pointer"
    />
</form>

De igual manera que con los otros elementos, podemos user el modificador hover, en este caso hover:file para cambiar las propiedades del botón que forma parte del input file.

Link del ejemplo

Viñetas de las listas

Para personalizar las viñetas (bullets) de las listas utilizamos el modificador marker. Con este podemos dar estilos de diferentes tipos como el color utilizado en la viñeta.

En el siguiente ejemplo vamos a crear una lista que utiliza discos (un punto) de color celeste.

<div class="bg-white p-5 rounded shadow-lg">
    <h1 class="font-bold mb-3">Grupos Mexicanos</h1>

    <ul class="marker:text-sky-800 list-inside list-disc">
        <li>Mana</li>
        <li>Cafe Tacuba</li>
        <li>Caifanes</li>
        <li>Azul Violeta</li>
        <li>Moderato</li>
    </ul>
</div>

Link del ejemplo

Hemos podido cambiar el diseño de la lista con Tailwind utilizando el modificador marker, este modificar es heredable, de tal forma que se puede usar tanto directamente en la etiqueta li, como en la etiqueta ul y esta heredará el estilo a todos los li que contenga.

Texto subrayado

Es posible personalizar el estilo aplicado al remarcado que aparece cuando seleccionamos un texto, para ello utilizamos el modificador selection de Tailwind CSS.

Por ejemplo, si deseáramos utilizar una selección con fondo amarillo y texto resaltado, como si se tratase de un cuaderno de notas.

<div
    class="bg-white shadow-lg rounded p-5 selection:bg-yellow-400 selection:underline"
>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam ipsa,
    laboriosam, dolores excepturi mollitia atque, velit est consequatur
    reprehenderit laborum earum. Quisquam eveniet, nulla cumque laborum fugit
    qui! Officiis animi dignissimos fugit blanditiis unde magni error facilis
    obcaecati, iste quas autem! Similique explicabo quae fuga aut minima rem
    accusantium quasi?
</div>

Link del ejemplo

El modificador selection es heredable, por lo que puede aplicarse a cualquier parte del documento html, y sus elementos hijos heredaran los estilos aplicados a la selección.

Primera línea y primera letra

Se puede aplicar estilos a la primera línea en un parrado utilizando el modificador first-line, y a la primer letra utilizando el modificador first-letter.

En el siguiente párrafo vamos a personalizar la primer letra y la primera línea para hacerlas distintas del resto.

<div class="bg-white rounded p-5">
    <p
        class="mb-5 first-line:text-xl first-letter:text-5xl first-letter:float-left first-letter:mr-2"
    >
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores,
        voluptatum consequatur. Ut odio velit quis maxime necessitatibus, sint
        doloremque quo, provident dolor, id omnis deleniti suscipit
        exercitationem pariatur tempora. Soluta quibusdam ea consectetur,
        dolorum praesentium voluptas quia tempora accusantium inventore,
        doloribus, vero earum nemo tenetur?
    </p>

    <p>
        Laudantium culpa illo ducimus necessitatibus delectus quis non fugit
        aspernatur autem unde, distinctio deserunt! Eum nihil non, repellendus
        delectus quae aspernatur dignissimos minima saepe error distinctio,
        quaerat dolorem inventore eaque. Accusamus ullam cupiditate facilis
        officiis. Facilis esse reiciendis, eum magni fugit quod accusamus
        aspernatur ab possimus voluptas non in doloremque nihil eveniet sit
        maiores ut.
    </p>
</div>

Link del ejemplo

Dialogs y Overlays

Para personalizar la etiqueta <dialog> que permite crear dialogs y overlays Tailwind utiliza el modificador backdrop.

<div class="p-10 bg-slate-400 min-h-screen">
    <dialog
        class="bg-white rounded p-10 backdrop:bg-opacity-50 backdrop:bg-gray-500"
    >
        <p class="mb-3">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus
            facilis maxime, adipisci esse maiores tenetur ab dignissimos sed
            accusantium sapiente cum minus distinctio beatae quibusdam provident
            eaque est rerum placeat, quisquam doloremque molestiae magnam
            reprehenderit!
        </p>

        <button
            onclick="void(document.querySelector('dialog')).close()"
            class="bg-blue-400 px-5 py-1 rounded text-white font-medium"
        >
            Cerrar
        </button>
    </dialog>
    <div class="bg-white p-5 rounded">
        <button
            onclick="void(document.querySelector('dialog')).showModal()"
            class="bg-blue-400 px-5 py-1 rounded text-white font-medium"
        >
            Abrir
        </button>
    </div>
</div>

Link del ejemplo

Tomar en cuenta que backdrop corresponde a la envoltura del overlay y no al área del contenido, para este último podemos aplicar los estilos de manera normal como si de un div se tratara.