CSS свойство content
Свойство content используется вместе с псевдоэлементами ::before и ::after для генерации содержимого внутри элемента. Без явного значения псевдоэлементы остаются пустыми. Свойство принимает следующие значения:
- normal
- none
- counter
- attr
- string
- open-quote
- close-quote
- no-open-quote
- no-close-quote
- url
INFO
Объекты, вставляемые с помощью свойства content, являются анонимными замененными элементами. Примечание: свойство quotes должно быть установлено для элемента, чтобы open-quote и close-quote отображали реальные кавычки.
| Начальное значение | normal |
|---|---|
| Применяется к | Псевдоэлементам ::before и ::after. |
| Наследуется | Нет. |
| Анимация | Нет. |
| Версия | CSS2 |
| Синтаксис DOM | element.style.content = "none"; |
Синтаксис
Синтаксис свойства CSS content
content: normal | none | counter | attr | string | open-quote | close-quote | no-open-quote | no-close-quote | url | initial | inherit;Пример свойства content:
Пример использования свойства CSS content со значением normal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::before {
content: "Name -";
}
.country::before {
content: normal;
}
</style>
</head>
<body>
<h2>Content property example</h2>
<p>My name is John</p>
<p class="country">I live in Canada</p>
</body>
</html>Результат
Пример свойства content со значением "string":
Пример использования свойства CSS content со значением string
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li:before {
content: "List item";
}
p:after {
content: " with string value.";
}
</style>
</head>
<body>
<h2>Content property example</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<p>Here is some paragraph</p>
</body>
</html>В следующем примере вы можете увидеть, что open-quote не может появиться без close-quote.
Пример свойства content со значением "open-quote":
Пример использования свойства content со значениями open-quote и close-quote
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
quotes: open-quote close-quote;
}
p::before {
content: open-quote;
}
p::after {
content: close-quote;
}
</style>
</head>
<body>
<h2>Content property example</h2>
<p>Hello, my name is John</p>
<p>I am from Canada</p>
</body>
</html>Пример свойства content со значениями "open-quote" и "no-close-quote":
Пример использования свойства content со значениями "open-quote" и "no-close-quote":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::before {
content: open-quote;
}
p::after {
content: no-close-quote;
}
</style>
</head>
<body>
<p>Example with content property</p>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| normal | Устанавливает содержимое в нормальное состояние. Это значение по умолчанию. |
| none | Убирает содержимое. Псевдоэлемент не генерируется. |
| counter | Устанавливает содержимое равным значению счетчика. |
| attr | Устанавливает содержимое равным значению атрибута выбранного элемента. |
| string | Устанавливает содержимое равным строке текста. |
| open-quote | Устанавливает содержимое в виде открывающей кавычки. |
| close-quote | Устанавливает содержимое в виде закрывающей кавычки. |
| no-open-quote | Убирает открывающую кавычку из содержимого. |
| no-close-quote | Убирает закрывающую кавычку из содержимого. |
| url | Устанавливает содержимое в виде URL, указывающего на ресурс, например изображение, звук или видео. Если изображение не может быть отображено, оно будет либо проигнорировано, либо отобразится заполнитель. |
| initial | Устанавливает свойству его значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Практика
Какие существуют категории CSS content, которые можно использовать для управления размером содержимого блока?