Садржај - ЦСС-трикови

Anonim

contentНекретнина у ЦСС се користи у комбинацији са псеудо-елемената ::beforeи ::after. Користи се за дословно уметање садржаја. Постоје четири врсте вредности које може имати.

Низ

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

Затим елемент попут овог:

 Chris

Приказало би се овако:

Name: Chris

То би такође могао бити празан низ, што се често види у стварима попут цлеарфик-а.

Цоунтер

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

Више информација о томе.

Слика

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

Ово је дословно слика на страници каква би била. То би могао бити и градијент. Имајте на уму да не можете променити димензије слике када се уметне на овај начин. Слику можете да уметнете и тако што ћете за садржај користити празан низ, направити га display: blockна неки начин, одредити величину и користити background-image. На тај начин бисте могли да га промените background-size.

Атрибут

У сваком случају можете користити вредности (низове) које су преузете директно из атрибута у ХТМЛ-у.

 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()Функција нема "врсте" још увек, тако да не може да прође вредност као 20px(само жице), али једног дана!

Алтернативни текст

Спецификација каже да /у синтакси можете да користите алтернативни текст. На пример…

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

Можда бисте могли да га употребите као ...

 

    

  • Make Bed
    • 

  • Grocery Shop
    • 

  • Sweep Driveway
    • 



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

Више информација

Садржај уметнут на овај начин заправо није у ДОМ-у, тако да има одређена ограничења. На пример, не можете да приложите догађај директно (само) псеудо-елементима. Такође је недоследно да ли читачи екрана читају текст који је уметнут на овај начин (обично је то данас) или можете да га одаберете (обично то нису данас).

  • Кул ствари које псеуедо елементи могу
  • Презентација о псеудо елементима
  • МДН Документи

Подршка прегледача

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.

Десктоп

Хром Фирефок ИЕ Ивица Сафари
4 2 9 12 3.1

Мобиле / Таблет

Андроид Цхроме Андроид Фирефок Андроид иОС Сафари
88 85 2.1 3.2

За Опера, url()подржано само у верзији 7+.