Varios usos posibles de la propiedad "content:" en css2/css3

Question

Estoy tratando de encontrar información actualizada sobre varios usos posibles de la propiedad content: en css, pero solo encuentro material en las antiguas mazmorras de la web que datan de 2004 o también así que pensé que tengo que hacer esta vez en 2011:

p:before { 
content: url(dingdong.png); 
} 

p:before { 
content: "some text "; 
} 

soy muy nuevo en tanto el selector :before, así como la propiedad content: y oído de ella accidentalmente sobre esta cuestión que fue respondido con mucha creatividad por una señora encantadora:

How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

sólo para descubrir que algunos problemas pueden ocurrir en relación con la codificación real del contenido:

li:before{ content: "■"; } How to Encode this Special Character as a Bullit in an Email Stationery?

Y por lo que mi pregunta concreta es: además de url() y "text", son ther otras posibilidades?
Muchas gracias por sus sugerencias e ideas.

Answer 1

Oh, demasiados para enumerar.Algunos de los casos más comunes son:

• numeración especial, con la función counter(), junto con los counter-reset y counter-increment propiedades

• puro clearfix CSS con:

  .foo:after { 
      content: ""; 
      display: block; 
      clear: both; 
  } 
  

• atributos de visualización , por ejemplo, para imprimir URL para hipervínculos en una hoja de estilo de impresión

  a[href]:after { 
      content: ' (' attr(href) ') '; 
  } 
  

• Agregue adornos tipográficos que no deberían estar en el HTML porque son de presentación. Por ejemplo, en mi blog, lo he usado para los adornos entre publicaciones o enlaces de la barra lateral.

• Añadir iconos a los hipervínculos, dependiendo de donde se señalan, como

  a[href^="http://twitter.com/"]:before { 
      content: url('twitter-icon.png'); 
  } 
  

• Adición de un puntero para hacer un bocadillo de diálogo CSS-solamente:

  .bubble { 
      position: relative; 
      background: silver; 
  } 
  
  .bubble:after { 
      content: ""; 
      border:10px solid transparent; 
      border-top-color:silver; 
      position: absolute; 
      bottom:-20px 
  } 
  

Y muchos, Muchos otros.

Sólo tenga cuidado: si algo no es de presentación, probablemente debería estar en su HTML. Los usuarios no podrán seleccionar el contenido generado por CSS, y los lectores de pantalla lo ignorarán.

Answer 2

También puede usar un contador. Ver http://www.w3schools.com/css/tryit.asp?filename=trycss_content_counter

También puede mostrar un determinado atributo del elemento seleccionado. Consulte http://jsfiddle.net/EcnM2/

También puede agregar o quitar presupuestos de apertura y cierre.

w3schools lista de propiedades de contenido: http://www.w3schools.com/css/pr_gen_content.asp

Answer 3

contenido generado no será percibido por los lectores de pantalla así que ten cuidado de los problemas de accesibilidad.
content es muy útil, pero hay casos en que este texto debe estar en el código HTML porque transmite información y no es solo decorativo (un poco como imágenes de fondo en CSS vs informativo img con un atributo alternativo no vacío)

• : después y el contenido puede ser utilizado como un clearfix sin div adicional
• : before y: after llevar varios fondos (hasta 3 w/el elemento en sí) para los navegadores que no entienden la función de CSS3.

EDIT: se olvidó de artículo de Eric Meyer en una lista aparte sobre printing the href attribute of links junto con su texto con la ayuda de contenido (que fue seguido por una JS improvement, FYI)