Content

Свойство content

С помощью свойства content можно вставлять в текст веб-страницы генерируемое вспомогательное содержимое в виде букв, слов, предложений или специальных знаков. Такая возможность осуществляется при взаимодействии со свойствами after и before, которые указывают, с какой стороны элемента выводить новое содержимое.


content: строка;
content: attr(атрибут);
content: open-quote;
content: close-quote;
content: no-open-quotes;
content: no-close-quote;
content: url;
content: counter;
content: normal;
content: none;
content: inherit;

Строка – здесь записывается текст в кавычках, который должен выводиться веб-страницу. Также имеется возможность записи юникода совместно с текстом или без.

attr() – функция добавления значения атрибута элемента.

open-quote – вставка открывающих кавычек.

close-quote – вставка закрывающих кавычек.

no-open-quotes – отмена открывающих кавычек.

no-close-quote – отмена закрывающих кавычек.

url – адрес вставляемого объекта в относительном или абсолютном формате.

counter – вывод значения счетчика, установленного свойством counter-reset.

none – отмена добавления содержимого.

normal – действует как none для псевдоэлементов :before и :after.

inherit – наследование значения родителя.

Добавление специального символа

Любому текстовому элементу для украшения можно добавить специальные символы, располагаемые спереди, сзади или с обеих сторон одновременно. В таких случаях в качестве выводимого содержимого используется код символов Юникода.

Content символы 

HTML

<h1>Заголовок</h1>



CSS

h1{
    color: #424242;
    text-align: center;
}
h1:before, h1:after {
    color: #818181;
    content: "\2605 \2605 \2605";
}
h1:before {
    margin-right: 20px;
}
h1:after {
    margin-left: 20px;
}

Добавление текста

В качестве содержимого, в особенности, когда оно часто повторяется, можно использовать любой текст, который будет выводиться в указанном месте, как есть. Для этого нужно в качестве параметра свойства content между кавычками вписать желаемый текст.

CSS вставка текста 

HTML

<div class="container">
  <div class="first-name">Ivan</div>
  <div class="last-name">Ivanov</div>
  <div class="phone">(000) 000-00-00</div>
  <div class="your-mail">mymail@gmail.com</div>
</div>



CSS

.container {
    font-size: 22px;
    margin-top: 55px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 100px;
}
.container div {
    margin: 12px 0px;
}
.first-name:before,
.last-name:before,
.your-mail:before,
.phone:before {
    font-weight: bold;
}
.first-name:before {
    content: "First Name: ";
}
.last-name:before {
    content: "Last Name: ";
}
.your-mail:before {
    content: "Your Mail: ";
}
.phone:before {
    content: "Phone: ";
}

Добавление значения атрибута attr

С помощью функции attr() имеется возможность добавления в свойство стилей значения выбранного атрибута элемента. К примеру, можно получить url-адрес ссылки, а затем вывести его с основным текстом анкора.

CSS attr 

HTML

<p><a href="http://code-pattern.ru/" class="site">Примеры кода разметки страниц</a></p>



CSS

.site:after {
    content: " ( " attr(href) " )";
}

Добавление кавычек

С помощью таких параметров как open-quote и close-quote можно отображать открывающие и закрывающие кавычки.

Кавычки CSS 

HTML

<p>Компьютерные <span class="computer-quotes">кавычки</span></p>



CSS

p {
    color: #424242;
    font-size: 30px;
    text-align: center;
}
.computer-quotes:before {
    content: open-quote;
} 
.computer-quotes:after {
    content: close-quote;
}

Добавление изображения

При использовании свойства content в качестве значения можно использовать абсолютный или относительный адрес того объекта который нужно вставить.

URL CSS 

HTML

<h1>Заголовок</h1>



CSS

h1 {
    color: #424242;
    font-size: 32px;
    text-align: center;	
}
h1:before {
    margin-right: 20px;
    content: url(gear.png) url(gear.png) url(gear.png);	
}
h1:after {
    margin-left: 20px;
    content: url(gear.png) url(gear.png) url(gear.png);	
}

Добавление счетчика элементов

С помощью свойства counter-reset и counter-increment можно задать нумерацию для любых блочных элементов на веб-странице.

CSS счетчик 

HTML

<div class="chapters">
  <ol>
    <li>Наименование главы
      <ol>
        <li>Название статьи</li>
        <li>Название статьи</li>
        <li>Название статьи</li>
      </ol>
    </li>
    <li>Наименование главы
      <ol>
        <li>Название статьи</li>
        <li>Название статьи</li>
        <li>Название статьи</li>
      </ol>
    </li>
    <li>Наименование главы
      <ol>
        <li>Название статьи</li>
        <li>Название статьи</li>
        <li>Название статьи</li>
      </ol>
    </li>
  </ol>
</div>



CSS

.chapters{
    font-size: 18px;
    padding-top: 45px;
    margin-left: 50px;
}
.chapters li {
    margin: 12px 0px;
    list-style-type: none;  
}
.chapters ol {
    margin: 24px 0px;
    counter-reset: list1;  
} 
.chapters ol li:before {
    counter-increment: list1;
    content: "Глава № " counter(list1) ". ";
}
.chapters ol ol {
    counter-reset: list2; 
}
.chapters ol ol li:before {
    counter-increment: list2;
    content: counter(list1) "." counter(list2) ". ";
}