Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника

CSS2 поддерживает следующие варианты создания автоматического содержимого, счетчиков, нумерации:

  1. С помощью свойства content, в совокупности с псевдо-элементами :before и :after pseudo-elements;
  2. С помощью свойств cue-before, cue-after (свойства, применяемые в таблицах стилей для слабовидящих или слепых, создающие звуковое сопровождение);
  3. Для любых элементов со свойством display:list-item;
Пример создания автоматического содержимого с помощью псевдо-элементов before и :after. При этом автоматическое содержимое включается в создаваемый элемент со всеми выходящими из этого последствиями:
  1.P.note:before { content: "Note: " }
  2.P.note { border: solid green }
  3.

Псевдо-элементы before и :after наследуют все наследуемые свойства элемента к которому они применяются.

Пример автоматически содержимого:

  1.<!DOCTYPE html>
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Пример автоматически созданного текста</TITLE>
  5.<STYLE type="text/css">
  6.P.note:before{
  7.content: open-quote; // открывая кавычка
  8.color: red;
  9.}
10.P.note:after{
11.content: close-quote; // закрывающая кавычка
12.color: red;
13.}
14.P.note {border: solid green}
15.</STYLE>
16.</HEAD>
17.<BODY>
18.<DIV>
19.<P class="note">В этом примере с
20.помощью свойства content создаются кавычки</P>
21.
22.</DIV>
23.
24.
25.</BODY>
26.</HTML>
27.
28.
Пример автоматически созданного текста
Пример автоматически созданного текста
Те свойства, которые псевдо-элементы before и :after не наследуют, устанавливаются на основе исходного значения.

В первом примере исходное свойство display было установлено как inline измените его на block после чего параграф будет блочным элементом и сместиться полностью в низ страницы:

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Пример автоматически генерируемого содержимого</TITLE>
  5.<STYLE type="text/css">
  6.P.note:after{
  7.content: "The End";
  8.display: block;
  9.margin-top: 2em;
10.text-align: center;
11.}
12.P.note {border: solid green}
13.</STYLE>
14.</HEAD>
15.<BODY>
16.<DIV>
17.<P class="note">
18.Справедливость — истина в действии. Бенджамин Дизраэли.
19.</P>
20.</DIV>
21.</BODY>
22.</HTML>
23.
24.
Пример автоматически созданного текста
Пример автоматически созданного текста

Браузер должен игнорировать псевдо-элементы before и :after следуемые вместе со свойствами position, float, list и свойствами используемыми для таблиц.

Следует быть внимательным и помнить, что псевдо-элементы :before и :after могут содержать свойство display со значениями 'none', 'inline', 'block', and 'marker', если селектор является блочным элементом. Все другие значения свойства display заставляют псевдо-элемент рассматриваться как блочный элемент.

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


Александр Ермаков. Хостинг - www.pwstudio.org