"content:" özelliğinin çeşitli olası kullanımları css2/css3

Question

CSS'deki content: mülkünün çeşitli olası kullanımları hakkında bazı güncel bilgiler bulmaya çalışıyorum, ancak yalnızca 2004 tarihli web sitesindeki eskilerin eski çağdaki zindanlarında bir şeyler bulmaya çalışıyorum

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

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

çok :before selektör yanı sıra content: mülkiyet hem yeni ve bunu duymuş olduğum yanlışlıkla bir çok yaratıcı cevap verilmiştir bu soru üzerine: bu yüzden ben yine 2011 yılında bu sormak zorunda düşünce güzel bayan:

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

Sadece bazı sorunlar içeriğin asıl kodlama konusunda ortaya çıkabilir öğrenmek için:

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

Ve böylece somut soru: url() ve "text" yanında ther diğer olasılıklar vardır?
Önerileriniz ve fikirleriniz için çok teşekkürler.

Answer 1

Ah, çok fazla listelemek için (Bilginize, bir JS improvement izledi) dışında yaklaşık printing the href attribute of links içerik yardımı ile onların metinle birlikte bir Listesi'nde Eric Meyer'in makalesinde unuttu.En yaygın vakaların bazıları şunlardır:

• Özel numaralandırma, counter() fonksiyonu ile, counter-reset ve counter-increment özellikleri

• Saf CSS Clearfix ile birlikte:

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

• Ekran nitelikler Örneğin, bir yazdırma stil sayfasındaki köprüler için URL'leri yazdırmak için

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

• Sunulanlar çünkü HTML'de olmaması gereken tipografik süslemeler ekleyin. Örneğin, benim blog, postalar veya kenar çubuğu bağlantıları arasındaki süslemeler için kullandım. ,

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

Ve birçok:

CSS okunur konuşma balonunu yapmak için bir işaretçi ekleme

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

gibi onlar işaret yere bağlı köprülere simgeler ekleyin Diğer birçok.

Dikkat: Bir şey sunum değilse, muhtemelen HTML'nizde olmalıdır. Kullanıcılar CSS tarafından oluşturulan içeriği seçemez ve ekran okuyucuları bunu görmezden gelir.

Answer 2

Ayrıca bir sayaç da kullanabilirsiniz. Bkz. http://www.w3schools.com/css/tryit.asp?filename=trycss_content_counter

Seçilen öğenin belirli bir özelliğini de görüntüleyebilirsiniz. Bkz. http://jsfiddle.net/EcnM2/

Ayrıca açma ve kapama tekliflerini ekleyebilir veya kaldırabilirsiniz.

W3Schools içerik özellik listesi: http://www.w3schools.com/css/pr_gen_content.asp

Answer 3

Oluşturulan içerik böylece erişilebilirlik konularında dikkat ekran okuyucuları tarafından algılanan edilmeyecektir.
content çok yararlıdır ancak bilgi yaymaktadır ve tek olmadığı için bu metin HTML kodundaki olmalıdır durumlar da vardır dekoratif

(boş olmayan bir alt niteliği olmayan bilgilendirici img vs CSS arka plan görüntüleri gibi bir bit)

• : hiçbir ekstra div
• ile Clearfix olarak kullanılabilir sonra ve içerik: before ve: CSS3 özelliği anlamıyorum tarayıcılara (elemanın kendisi w/3'e kadar) birden fazla arka plan getirmek sonra.

DÜZENLEME: