::ante contra :antes

Tenga en cuenta los dos puntos ::beforefrente a los dos puntos :before. ¿Cuál es correcto?

Técnicamente, la respuesta correcta es ::before. Pero eso no significa que debas usarlo automáticamente.

La situación es que:

• Los selectores de dos puntos son pseudoelementos.
• Los selectores de dos puntos son pseudoselectores.

::beforees definitivamente un pseudoelemento, por lo que debería usar dos puntos dobles.

La distinción entre pseudoelemento y pseudoselector ya resulta confusa. Afortunadamente, ::afterson ::beforebastante sencillos. Literalmente añaden algo nuevo a la página, un elemento.

Pero algo así ::first-lettertambién es un pseudoelemento. La forma en que eso ocurre en mi cerebro es que está seleccionando una parte de algo para lo cual no existe ningún elemento HTML. No hay nada spanalrededor de la primera letra a la que te dirige, por lo que esa primera letra es casi como un nuevo elemento que estás agregando a la página. Eso difiere de los pseudo-selectores que seleccionan cosas que ya existen, como :nth-child(2)o lo que sea.

Aunque ::beforees un pseudoelemento y dos puntos son la forma correcta de utilizar pseudoelementos, ¿debería hacerlo?

Hay un argumento que tal vez deberías usar :before, que dice así:

1. Sólo se admite Internet Explorer 8 y versiones inferiores :before, no::before
2. Todos los navegadores modernos lo admiten en ambos sentidos, ya que muchos sitios lo utilizan :beforey los navegadores realmente valoran la compatibilidad con versiones anteriores.
3. Oye, es un personaje menos como corresponde.

Escuché a personas decir que tienen un linter CSS que requiere (o automáticamente) que sean de dos puntos. Personalmente, estoy de acuerdo con que la gente haga eso. Si veis bien. Valoraría la coherencia sobre el camino que elijas tomar.

Por otro lado, hay un argumento a favor ::beforeque dice así:

1. Los pseudoelementos de dos puntos fueron un error. Nunca habrá más pseudoelementos con dos puntos.
2. Si tiene la distinción clara en mente, también podría entrenar sus dedos para hacerlo bien.
3. Esto ya es bastante confuso, así que sigamos el camino especificado correctamente.

Tengo mi linter configurado para obligarme a hacer dos puntos. De todos modos, no soy compatible con Internet Explorer 8 y se siente bien hacer las cosas de la manera “correcta”.