Zawartość - CSS-Tricks

Anonim

contentWłaściwość CSS jest stosowany w połączeniu z pseudoelementów ::beforei ::after. Służy do dosłownego wstawiania treści. Może mieć cztery typy wartości.

Strunowy

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

Następnie element taki jak ten:

 Chris

Wyrenderowałby tak:

Name: Chris

Może to być również pusty ciąg, co jest często spotykane w rzeczach takich jak clearfix.

Licznik

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

Więcej informacji na ten temat.

Wizerunek

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

To jest dosłownie obraz na stronie, jaki byłby. Może to być również gradient. Pamiętaj, że nie możesz zmienić wymiarów obrazu, gdy jest wstawiony w ten sposób. Możesz również wstawić obraz, używając pustego ciągu dla treści, tworząc go display: blockw jakiś sposób, zmieniając jego rozmiar i używając background-image. W ten sposób możesz zmienić jego rozmiar za pomocą background-size.

Atrybut

Możesz użyć wartości (w każdym razie ciągów znaków), które są pobierane bezpośrednio z atrybutów w kodzie 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()Funkcja nie ma „typów” jeszcze, więc nie można przekazać wartość podobnego 20px(tylko strun), ale kiedyś!

alternatywny tekst

Specyfikacja mówi, że możesz użyć /w składni, aby wyświetlić tekst alternatywny. Na przykład…

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

Być może mógłbyś go użyć jak…

 

    

  • Make Bed
    • 

  • Grocery Shop
    • 

  • Sweep Driveway
    • 



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

Więcej informacji

Treść wstawiona w ten sposób nie jest tak naprawdę w DOM, więc ma pewne ograniczenia. Na przykład, nie możesz dołączyć zdarzenia bezpośrednio (tylko) do pseudoelementów. Niespójne jest również to, czy tekst wstawiony w ten sposób jest czytany przez czytniki ekranu (zwykle tak jest w dzisiejszych czasach), czy też można go zaznaczyć (zwykle nie jest to obecnie).

  • Fajne rzeczy, które mogą zrobić elementy pseuedo
  • Prezentacja o pseudoelementach
  • MDN Docs

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.

Pulpit

Chrom Firefox TO ZNACZY Brzeg Safari
4 2 9 12 3.1

Telefon komórkowy / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 2.1 3.2

W przypadku Opery url()obsługiwane tylko w wersji 7+.