Descubre el potencial creativo de ::before y ::after para añadir elementos decorativos, iconos y efectos visuales sin contaminar tu HTML. Técnicas avanzadas para dominar estos poderosos selectores.
Ejemplos visuales de pseudoelementos aplicados en diseño web
Contenido del Artículo
Fundamentos de Pseudoelementos
Conceptos esenciales para trabajar con ::before y ::after:
/* Sintaxis básica */
.elemento::before {
content: ''; /* Obligatorio incluso si está vacío */
display: block;
width: 100%;
height: 3px;
background: linear-gradient(to right, #3498db, #e74c3c);
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}| Propiedad | Requerida | Descripción |
|---|---|---|
| content | Sí | Define el contenido (texto, imagen, vacío) |
| display | Sí | block, inline-block, flex, etc. |
| position | Depende | Para posicionamiento absoluto/relativo |
| z-index | Opcional | Control de capas cuando se superponen |
Usos Creativos Avanzados
Técnicas profesionales para diseño con pseudoelementos:
Citas decoradas
Añadir comillas decorativas
Tooltips CSS-only
Información emergente sin JavaScript
Efectos de hover
Transiciones complejas en elementos
Formas complejas
Triángulos, círculos y otras figuras
/* Tooltip CSS-only */
[data-tooltip] {
position: relative;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%) scale(0.9);
opacity: 0;
background: #333;
color: white;
padding: 6px 12px;
border-radius: 4px;
font-size: 14px;
white-space: nowrap;
pointer-events: none;
transition: all 0.2s ease;
}
[data-tooltip]:hover::after {
opacity: 1;
transform: translateX(-50%) scale(1);
}
/* Triángulo CSS */
.tooltip::before {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 8px solid transparent;
border-top-color: #333;
}Técnicas Avanzadas
Combinaciones poderosas con otras propiedades CSS:
/* Efecto de imagen con superposición */
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #8e44ad, #3498db);
opacity: 0.8;
mix-blend-mode: multiply;
transition: opacity 0.3s ease;
}
.card:hover::before {
opacity: 0.4;
}
/* Contador automático */
.seccion {
counter-reset: item-counter;
}
.item {
position: relative;
padding-left: 40px;
}
.item::before {
counter-increment: item-counter;
content: counter(item-counter);
position: absolute;
left: 0;
top: 0;
width: 30px;
height: 30px;
background: #3498db;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-weight: bold;
}Usa attr() para crear tooltips dinámicos sin JavaScript: content: attr(data-tooltip)
