Tenga en cuenta el doble punto ::before versus el colon único :before. Cual es la correcta?
Técnicamente, la respuesta correcta es ::before. Pero eso no significa que deba usarlo automáticamente.
La situación es que:
- Los selectores de dos puntos son pseudoelementos.
- Los selectores de dos puntos simples son pseudo-selectores.
::before es definitivamente un pseudoelemento, por lo que debería usar dos puntos dobles.
La distinción entre un pseudoelemento y un pseudo-selector ya es confusa. Por suerte, ::after y ::before son bastante sencillos. Literalmente agregan algo nuevo a la página, un elemento.
Pero algo como ::first-letter también es un pseudo-elemento. La forma en que razono eso en mi cerebro es que está seleccionando una parte de algo para lo que no hay ningún elemento HTML existente. No hay <span> alrededor de la primera letra a la que se dirige, por lo que la primera letra es casi como un elemento nuevo que está agregando en la página. Eso difiere de los pseudo-selectores que seleccionan cosas que ya existen, como el :nth-child(2) o lo que sea.
Aunque ::before es un pseudo-elemento y dos dos puntos es la forma correcta de usar pseudo-elementos, ¿debería?
Hay un argumento que quizás deberías usar :before, que es así:
- Solo se admite Internet Explorer 8 y versiones anteriores
:before, no::before - Todos los navegadores modernos lo admiten en ambos sentidos, ya que muchos sitios utilizan
:beforey los navegadores realmente valoran la compatibilidad con versiones anteriores. - Oye, es un personaje menos como bonificación.
He escuchado a personas decir que tienen un linter CSS que requiere (o automatiza) que sean de dos puntos simples. Personalmente, estoy de acuerdo con que la gente haga eso. Se ve bien. Valoraría la coherencia sobre el camino que elijas.
Por otro lado, hay un argumento a favor de ::before que va así:
- Los pseudoelementos de dos puntos fueron un error. Nunca habrá más pseudoelementos con dos puntos simples.
- Si tiene la distinción clara en su mente, también podría entrenar sus dedos para hacerlo bien.
- Esto ya es lo suficientemente confuso, así que sigamos la forma especificada correctamente.
Tengo mi linter configurado para obligarme a usar dos puntos. De todos modos, no soy compatible con Internet Explorer 8 y se siente bien hacer las cosas de la manera “correcta”.