Dudas sobre :after y :before

[tommy_tony]

Exactamente como dice el titulo tengo dudas sobre estas pseudo clases.Seguro de que ya se ha tratado el tema en el foro y busqué pero continúan mis dudas , por ejemplo vi un ejemplo como este:

p:before{
content:'una etiqueta p '
}

bueno, lo que hace o tendría que hacer esto es añadirle texto respectivo a una etiqueta P , mi duda es porque no le añadimos tal párrafo o texto "estática-mente" ya que he leído que cuando se usa estas pseudo clases el contenido se convierte en dinámico. Ví otro ejemplo en el que también agregaban a un blockquote las comillas mediante estas pseudo clases ¿porque no hacerlo desde html? ¿ que beneficios trae hacerlo desde el css?.

cual es la ventaja de añadir contenido desde css? .Obviamente habrán muchísimos solo que no puedo percibirlos

[pzin]

Iniciado por tommy_tony

cual es la ventaja de añadir contenido desde css?

No hay ninguna ventaja. Al menos yo no le veo sentido añadir contenido con content. Puede haber algún caso puntual, como lo de las comillas que comentas o añadir una imagen (algo muy concreto) con:

Código CSS:

content: url(algo.png);
 

Pero como digo, en mi opinión sería para algo muy concreto. Del contenido se ocupa el HTML. En sitios donde hacen cosas experimentales se ve mucho que usan content, pero no hay que olvidar que son cosas experimentales, y no siempre usan las técnicas más adecuadas para hacer las cosas. Lo malo es que la gente confunde experimental con algo que hay que hacer, y no es así.

Es como no usar tablas pero luego usar display:table.

Ahora, usar :after y :before para la parte de la maquetación, como pueden ser añadir sombras, bordes extra, etc, si, tiene la ventaja de no tener que añadir elementos al HTML propios del diseño del sitio, y por la tanto más propios de CSS.

[hdennison]

Uno de los ejemplos mas típicos es utilizar un before para añadir un icono, y podemos utilizar una tipografia donde cada letra es un icono diferente. ( por ejemplo http://www.tenbytwenty.com/sosa.php )

Asi podriamos tener algo como esto

[class|="msg"]::before { font-family:iconica; }

.msg-info::before { content: "i"; }

.msg-alert::before { content: "a"; }


Y ahora un semi-offtopic:

1) before y after no son pseudo clases, si no pseudo elementos

2) En CSS2.1 se escriben :before y :after pero en CSS3 pasan a ser ::before y ::after. IE anterior al 9 no entiende la manera "moderna".