Przykład
Poniższy przykład wstawia adres URL w nawiasach po każdym linku:
a:after
{
content: " (" attr(href) ")";
}
Spróbuj sam " Więcej "Try it Yourself" przykłady poniżej.
Definicja i Wykorzystanie
Nieruchomość treść jest stosowany z: before i: after pseudoelementów, aby wstawić wygenerowany treści.
| Domyślna wartość: | normal |
|---|---|
| Dziedziczny: | no |
| Animatable: | no. Read about animatable |
| Wersja: | CSS2 |
| Składnia JavaScript: | You can't give an element a pseudo-class by using JavaScript, but there are other ways to get the same result: Try it |
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| content | 1,0 | 8,0 | 1,0 | 1,0 | 4,0 |
Note: IE8 obsługuje tylko właściwość content jeśli DOCTYPE jest określona!.
Składnia CSS
content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;wartości nieruchomości
| Wartość | Opis | Przykład |
|---|---|---|
| normal | Domyślna wartość. Ustawia treści, jeżeli został on określony, do normy, które domyślnie jest to "none" (which is nothing) | Try it » |
| none | Ustawia zawartość, jeżeli został on określony, do niczego | Try it » |
| counter | Ustawia zawartość jako licznik | Try it » |
| attr (attribute) | Ustawia zawartość jako jeden z selector's atrybutu | Try it » |
| string | Ustawia treści do określonego tekstu | Try it » |
| open-quote | Ustawia zawartość będzie otwarcie cytat | Try it » |
| close-quote | Ustawia zawartość być zamykanie cytat | Try it » |
| no-open-quote | Usuwa otwierający cytat z treścią, jeżeli został on określony | Try it » |
| no-close-quote | Usuwa kursu zamknięcia z treści, jeżeli został on określony | Try it » |
| url( url ) | Ustawia zawartość być jakiś rodzaj przekazu (an image, a sound, a video, etc.) | Try it » |
| initial | Ustawia tę właściwość na wartość domyślną. Przeczytaj o początkowej | |
| inherit | Dziedziczy nieruchomość od swojego rodzica. Przeczytaj o dziedziczą |
Więcej przykładów
Przykład
Jak dodać kolory Bullet for <ul> i <ol> usuwając ich domyślne kul i dodanie podmiot HTML, który wygląda jak pociski (•) :
ul {
list-style: none; /* Remove list bullets */
padding: 0;
margin: 0;
}
li {
padding-left: 16px;
}
li:before {
content: "•"; /* Insert content that
looks like bullets */
padding-right: 8px;
color: blue; /* Or a color you prefer */
} Spróbuj sam " Podobne strony
Odniesienia CSS : Przed elementu pseudo
Odniesienia CSS : po elemencie pseudo