hand Inicio

SERVICIOS

Salir

nochedía

DESARROLLO WEB con
GATSBY y WORDPRESS

emoji Cursos [24]
emoji Themes Gatsby [5]
emoji Themes WordPress [2]
emoji Blog [83]
emoji Herramientas [11]

Cómo se escribe el operador :before (y :after)? Con dos puntos simples o dobles?

200 palabras
1 minutos
October 17, 2019
blogcss

Se escribe con dos puntos dobles ::before o ::after porque es un pseudo-elemento

  1. Before y After, qué son?
  2. Con doble operador

Before y After, qué son?

Qué son? son pseudo-elementos

En otras palabras, son elementos html que se definen en css

Y para qué?

Buena pregunta, porque la respuesta obvia es que no deberíamos poder mezclar html y css verdad?

Esto está cada vez en desuso gracias a CSS-in-JS, y como js es en realidad jsx casi que podríamos decir que los viejos paradigmas de separación de contenido y estética son esto, viejos (o no, todo es discutible)

Pero aún y así estos pseudo-elementos son extraños

css
p {
padding: 4px;
}
p::before {
content: '🤯';
margin-right: 5px;
}

Con este código decimos que a cada párrafo <p>...</p> se le añada este emoji antes del elemento, en lo que vendría a ser un elemento como-si-fuera-un <div>

Es extraño porque parece intrusismo, pero en realidad da mucha versatilidad al css en términos de poder alterar la estética del documento, y eso es de lo que se trata no?

Con doble operador

Y sí, como está en el código de arriba lo suyo es que se definan con doble operador ::

Por qué? Porque los dos puntos dobles son para pseudo-elementos, y los dos puntos simples son para los pseudo-selectores

Los pseudo-selectores son expresiones que utilizamos para seleccionar elementos, tipo :first-child, y estos van con un dos puntos simple

Dicho esto

Los dos puntos dobles son opcionales, aunque es así como lo marca el estándar en la práctica todos los navegadores entienden uno o dos puntos indistintamente

Pero son opcionales para los elementos existentes, para los futuros se entiende que no y que los nuevos pseudo-elementos deberán ir con dos puntos dobles (aunque nunca se sabe)

Qué tal la entrada?
👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏

Más entradas

Privacidad
by kuworking.com
[ 2020 >> kuworking ]