Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

Свойство content

Дата:28.09.15 в 12:56
Справочник: 

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

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

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>

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

content

Оценка: 
Оценок: 2 (средняя 5 из 5)
Тип CSS свойства: 
Понравилась статья? Расскажите о ней друзьям: