Sisältö - CSS-temppuja

Anonim

contentOmaisuus CSS käytetään yhdessä pseudo-elementtejä ::beforeja ::after. Sitä käytetään kirjaimellisesti sisällön lisäämiseen. Sillä voi olla neljä arvotyyppiä.

Merkkijono

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

Sitten tällainen elementti:

 Chris

Toisisi näin:

Name: Chris

Se voi myös olla tyhjä merkkijono, joka nähdään yleisesti esimerkiksi clearfixissä.

Laskuri

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

Lisätietoja siitä.

Kuva

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

Tämä on kirjaimellisesti kuva sivulla kuin se olisi. Se voi myös olla kaltevuus. Huomaa, että et voi muuttaa kuvan kokoa, kun se asetetaan tällä tavalla. Voit myös lisätä kuvan käyttämällä tyhjää merkkijonoa sisällölle, tekemällä sen display: blockjollakin tavalla, koon mukaan ja käyttämällä background-image. Näin voit muuttaa sen kokoa background-size.

Attribuutti

Voit käyttää arvoja (merkkijonoja joka tapauksessa), jotka otetaan suoraan HTML: n määritteistä.

 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()Toiminto ei ole ”tyyppejä” aivan vielä, joten et voi ohittaa arvon kuten 20px(vain jouset), mutta joskus!

Vaihtoehtoinen teksti

Specs sanoo, että voit käyttää /syntaksissa a vaihtoehtoisten tekstien luetteloon. Esimerkiksi…

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

Ehkä voisit käyttää sitä kuten…

 

    

  • Make Bed
    • 

  • Grocery Shop
    • 

  • Sweep Driveway
    • 



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

Lisää tietoa

Tällä tavalla lisätty sisältö ei todellakaan ole DOM: ssä, joten sillä on joitain rajoituksia. Et voi esimerkiksi liittää tapahtumaa suoraan (vain) pseudoelementteihin. On myös epäjohdonmukaista, lukevatko näytönlukijat tällä tavoin lisätyn tekstin (se tapahtuu yleensä näinä päivinä) vai voitko valita sen (se ei yleensä ole nykyään).

  • Hienoja asioita, joita pseuedo-elementit voivat tehdä
  • Esitys pseudoelementeistä
  • MDN-dokumentit

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.

Työpöytä

Kromi Firefox IE Reuna Safari
4 2 9 12 3.1

Matkapuhelin / tabletti

Android Chrome Android Firefox Android iOS Safari
88 85 2.1 3.2

Opera, url()tuettu vain versiossa 7+.