Conținut - CSS-Tricks

Anonim

contentProprietatea în CSS este utilizat împreună cu elementele-pseudo ::beforeși ::after. Este folosit pentru a insera literalmente conținut. Există patru tipuri de valori pe care le poate avea.

Şir

.name::before ( content: "Name: "; )

Apoi, un element ca acesta:

 Chris

Ar reda astfel:

Name: Chris

Ar putea fi, de asemenea, un șir gol, care este frecvent văzut în lucruri precum clearfix.

Tejghea

div::before ( content: counter(my-counter); )

Mai multe informații despre asta.

Imagine

div::before ( content: url(image.jpg.webp); )

Aceasta este literalmente o imagine de pe pagină așa cum ar fi. Ar putea fi și un gradient. Rețineți că nu puteți modifica dimensiunile imaginii atunci când este inserată în acest fel. De asemenea, puteți insera o imagine folosind un șir gol pentru conținut, realizându-l display: blockîntr-un fel, dimensionându-l și folosind background-image. În acest fel, îl puteți redimensiona cu background-size.

Atribut

Puteți utiliza valori (șiruri, oricum) care sunt preluate chiar din atributele din HTML.

 60 
(data-visual-label)::before ( content: attr(data-visual-label) ": "; ) /* Classic print trick! Show URLs! */ @media (print) ( a(href)::after ( content: " (" attr(href) ") "; /* you could combine a url() in here even if you wanted */ ) )

attr()Funcția nu are „tipuri“ încă, astfel încât să nu se poate trece o valoare cum ar fi 20px(doar siruri de caractere), dar într -o zi!

Text alternativ

Specificația spune că puteți utiliza a /în sintaxă pentru a lista text alternativ. De exemplu…

.el::before ( content: "⭐️" / "Alternate Text for that star"; content: "→" / ""; /* Visual only, don't read. */ )

Poate l-ai putea folosi ca ...

 

    

  • Make Bed
    • 

  • Grocery Shop
    • 

  • Sweep Driveway
    • 



(data-alt-pseudo="Completed")::before ( content: "✅"; /* fallback */ content: "✅" / attr(data-alt-pseudo); )

Mai multe informatii

Conținutul inserat în acest mod nu se află într-adevăr în DOM, deci are unele limitări. De exemplu, nu puteți atașa un eveniment direct (numai) la un pseudo-element. De asemenea, este neconcordant dacă textul inserat în acest mod este citit sau nu de cititoarele de ecran (de obicei, în aceste zile) sau dacă îl puteți selecta (de obicei nu este în aceste zile).

  • Lucruri interesante pe care le pot face pseudo-elementele
  • Prezentare despre pseudoelemente
  • Documente MDN

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.

Desktop

Crom Firefox IE Margine Safari
4 2 9 12 3.1

Mobil / Tabletă

Android Chrome Android Firefox Android Safari iOS
88 85 2.1 3.2

Pentru Opera, url()acceptat numai în versiunea 7+.