пример
Следующий пример вставляет URL в круглых скобках после каждой ссылки:
a:after
{
content: " (" attr(href) ")";
}
Попробуй сам " Больше "Try it Yourself" примеры ниже.
Определение и использование
Свойство контента используется с: до и: после псевдо-элементов, для вставки генерируемого контента.
| Значение по умолчанию: | normal |
|---|---|
| Наследование: | no |
| Animatable: | no. Read about animatable |
| Версия: | CSS2 |
| Синтаксис 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 |
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
| Имущество | |||||
|---|---|---|---|---|---|
| content | 1,0 | 8.0 | 1,0 | 1,0 | 4.0 |
Note: IE8 поддерживает только свойство контента , если указан! DOCTYPE.
CSS Синтаксис
content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;Значения свойств
| Стоимость | Описание | пример |
|---|---|---|
| normal | Значение по умолчанию. Устанавливает содержание, если указано, в нормальное русло, что по умолчанию "none" (which is nothing) | Try it » |
| none | Устанавливает содержание, если указано, ни к чему | Try it » |
| counter | Устанавливает содержание как счетчик | Try it » |
| attr (attribute) | Устанавливает содержание как один из selector's атрибута | Try it » |
| string | Устанавливает содержание в текст, который вы укажете | Try it » |
| open-quote | Устанавливает содержание, чтобы быть открытие цитатой | Try it » |
| close-quote | Устанавливает содержание быть закрытия цитатой | Try it » |
| no-open-quote | Удаляет открытие цитаты из содержания, если он указан | Try it » |
| no-close-quote | Удаляет закрытие цитаты из содержания, если он указан | Try it » |
| url( url ) | Устанавливает содержание , чтобы быть своего рода медиа (an image, a sound, a video, etc.) | Try it » |
| initial | Устанавливает это свойство в значение по умолчанию. Читайте о первоначальный | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о унаследовать |
Еще примеры
пример
Как добавить пули цвета для <ul> или <ol> путем удаления их пуль по умолчанию и добавление HTML - объект , который выглядит , как пули (•) :
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 */
} Попробуй сам " Похожие страницы
Справка CSS: : перед тем псевдо элемента
Справка CSS: : после того, как псевдо - элемента