驴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.
驴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>
驴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 casohover:filepara cambiar las propiedades del bot贸n que forma parte del input file.
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>
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 etiquetali, como en la etiquetauly esta heredar谩 el estilo a todos loslique 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>
El modificador
selectiones 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>
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>
Tomar en cuenta que
backdropcorresponde 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.