Volvemos a explorar algunas de las infinitas posibilidades que los pseudo-elementos :before y :after nos brindan mediante técnicas que no solo aportan un punto diferenciador a nuestros productos, sino que permiten comprender y salvaguardar esa ambigua diferencia entre los contenidos y los “pseudo contenidos”.

Recurrir a estos recursos de CSS te permitirá un mayor aprovechamiento de las capacidades del lenguaje, a la vez que adoptas una forma de trabajo más eficiente y profesional.

Adhesiones globales

Aplica ligeros detalles fijos sobre el <body> que, sin empeorar las condiciones de navegación de tus usuarios enriquezcan el aspecto general del producto.

Por ejemplo, unas finas líneas en los extremos de la pantalla que acompañen al usuario durante su experiencia son una excelente oportunidad para dar identidad corporativa a la interfaz a través del color:

body::before, body::after {
     content: '';  
     background: #DBA901;  /* color coporativo */
     position: fixed;
     z-index: 999;
     height: 4px;  
}

body::before {
     width: 70%;  
     left: 0;
     top: 0;
}

body::after {
     width: 20%;  
     bottom: 0;
     right: 0;
}

Resultado:

Ángulos asimétricos

¿Te cansa la regularidad? Rómpela.

A través de CSS es posible forzar un efecto de angulación mediante las propiedades skew que, controlando el eje sobre el que esta transformación se origina ( transfrom-origin ), expanden el eje elegido de forma tan pronunciada como sea el ángulo indicado:

.asimetrico:before, .asimetrico:after {
    background: inherit;
    content: '';
    height: 50%;
    left: 0;
    position: absolute;
    right: 0;
    z-index: -1;
    -webkit-backface-visibility: hidden;
}

.asimetrico:before {
    top: 0;
    -webkit-transform: skewY(2.5deg);
            transform: skewY(2.5deg);
    -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
}

.asimetrico:after {
    bottom: 0;
    -webkit-transform: skewY(-3.5deg);
            transform: skewY(-3.5deg);
    -webkit-transform-origin: 100%;
            transform-origin: 100%;
}

.asimetrico {
  color: #fff;
  margin: 50px;
  padding: 40px 0;
  text-align: center;
  background: #3b5998;
  position: relative;
  z-index: 1;
  letter-spacing: 14px;
  font-size: 2em;
}

.asimetrico p {
    font-size: 10em;
    letter-spacing: 17px;
}

Tooltips

Desplega una esquina sobre cualquier punto de una caja haciendo asi un contenedor idóneo para relacionar su contenido con algún elemento de la interfaz:

Contenido del tooltip

Un único pseudo-elemento es suficiente para crear el triángulo superior, controlando su posición horizontal mediante el valor de su propiedad left :

.tooltip {
	background-color: #3b5998;
	position: relative;
	display: inline-block;
	padding: 1em 3em;
	color: white;
	font-size: 1.2em;
}

.tooltip::after {
	border-bottom: 15px solid #3b5998;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	width: 0;
	height: 0;
	content: "";
	display: block;
	position: absolute;
	bottom: 100%;
	left: 1em;
}

Iconos en contenidos

Los pseudo elementos resultan ideales para adjuntar iconos ornamentales o funcionales antes y/o después de tus encabezados, listas o cualquier otra etiqueta de tu interfaz. Aportan carga gráfica, armonía, carácter y pueden ser usados para clarifican el orden y diversidad jerárquica de los contenidos.

Veamos una lista:

  • Elemento
  • Elemento
  • Elemento
  • Elemento
  • Elemento

Para hacer uso de iconos en contenidos, localiza en el CSS de cualquier colección de iconos que tengas instalada la clase con la que insertarías el elemento que buscas incluir:

.check-bolt:before { 
     content: "\f100"; 
}

Crea la regla de CSS insertando mediante :before y/o :after el grafismo con el nombre de la tipografía, e incluye como valor de content el código utilizado en su CSS original.

Formula con normalidad espacios, tamaños o colores:

li:before { 
     font-family: "Flaticon", sans-serif;   /* la familia de fuente de iconos */
     content: "\f100";                      /* el valor copiado del CSS original */
     margin-right: 10px;
     vertical-align: text-bottom;
}

Separación de Breadcrumbs

Este es un uso clásico y muy clarificador respecto a los pseudo elementos. En el menú de navegación secundario (breadcrumbs, es decir, migas de pan) los caracteres o símbolos encargados de dividir cada uno de los niveles entre los que el usuario puede navegar son elementos que, si bien deben visualizarse como contenido, no lo son.

Este es por tanto un claro ejemplo de pseudo contenido:

breadcrumbs

Estos separadores deben ser visualizados y además deben comportarse como otro elemento más del flujo, pero su presencia entre los contenidos carece de sentido ya que tiene un objetivo puramente funcional y visual.

Partimos del HTML:

<nav class="breadcrumbs">
    <ul>
        <li>
            <a href="/">Inicio</a>
        </li>
        
        <li>
            <a href="productos">Productos</a>
        </li>

        <li>Bienestar</li> 
    </ul>
</nav>

Al que aplicamos un sencillo sistema de reglas que garantizará la separación visual y espacial de cada elemento con independencia de la densidad de elementos:

.breadcrumbs li::after {
    content: " / ";
    margin: 0 10px;
    opacity: .4;
}

.breadcrumbs li:last-of-type::after {
    content: "";    /* el último no incluye separador */
}

El uso de la propiedad content en este contexto no está limitada a insertar caracteres sino que puedes incluir, por ejemplo, iconos vectoriales.