Свойство content

Справочник:

Свойство

Характеристики свойства

В каких браузерах работает?


8.0+	1.0+	7.0+	3.0+	1.0+	1.0+	1.0+

В каких версиях CSS используется?

CSS 1	CSS 2	CSS 2.1	CSS 3
-	+	+	+

Для чего используется?

Команда позволяет прописывать особый контент, который невозможно написать в обычных условиях. Используется всегда в комплексе с :after и :before. Из этого вытекает, что для определенного знака или слова в тексте можно прописывать особый контент до него и (или) после.

Как правильно задавать?

content: текст;

Какие могут быть значения?

Если значением выступает какой-то символ или текст, то этот контент записывается в кавычках со знаком равентсво перед первой кавычкой.

attr - позволяет повторять значения, указанные в определенных атрибутах. К примеру, для атрибута ссылки href покажется адрес объекта.
open-quote - соответствует знаку кавычек.
close-quote - соответствует знаку кавычек
no-open-quotes - запрещает к выводу знак кавычек
no-close-quote - запрещает к выводу знак кавычек
url - адрес местоположения контента, который необходимо вставить.
counter - счетчик, указанный посредством counter-reset.
none - отменяет вывод вспомогательного контента.
normal - соответствует функциям none, но предназначается для :before и :after.
inherit - повторяет стиль родителя.

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Свойства content</title>
  <style>
   body {
    color:#4d85b0;
   }
   .content {
    quotes: "<" ">";
   }
   .content:before {
    content: open-quote;
  }
   .content:after {
    content: close-quote;
   }
  </style>
 </head>
 <body>
  <p>Нельзя записывать тег без использования следующих
 кавычек: <span class="content">&nbsp;</span></p>
 </body>
</html>

По итогу получаем

Тип CSS свойства:

Контент