Главная css Псевдоэлементы CSS

Псевдоэлементы в CSS

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

Псевдоэлемент состоит из двух двоеточий ( :: ) и имени.
Двойное двоеточие было введено в CSS3 для того, чтобы отделить псевдоэлементы от псевдоклассов. Однако для совместимости с прежними таблицами стилей допускается использовать одинарное двоеточие ( : ).

Синтаксис:
селектор::Псевдоэлемен  /*двойное  двоеточие*/
 {CSS свойство: значение; ...
 }

 Псевдокласс начинается с двойного двоеточия  :: , но можно использовать и одиночное двоеточие (:).

Псевдоэлементы

::before ::after

Псевдоэлементы ::before и ::after используется вместе со свойством content, которое необходимо для вставки сгенерированного контента.

Псевдоэлемент ::before добавляет определённое содержимое перед каждым указанным элементом.

Псевдоэлемент ::after добавляет определённое содержимое после каждого элемента.

1
Вставка иконки FontAwesome

<style>
  li::before {
    content: "\f00c  "; /*Символ иконки перед элементом списка*/
    font-family: 'FontAwesome';
    color:red;  
  }
  li {
    list-style: none; /*Убираем исходные маркеры*/ 
  }

2
Вставка "Контакты"
p.contakt::before { content: "Наши контакты: "; color: maroon; } p.contakt::after { content: "8 800 100-70-10 (support@gosuslugi.ru)"; background: maroon; color: #fff; padding:3px 5px; } </style> <body> <ul> <li>Альфа</li> <li>Бета<li> <li>Гамма</li> </ul> <p class="contakt"></p> </body>

Результат 1
  • Альфа
  • Бета
  • Гамма
Результат 2

Псевдоэлементы

::first-line ::first-letter

Псевдоэлемент ::first-line – оформляет первую строку абзаца, позволяя определить свойства шрифта (font), цвета и заднего плана (color и background), интервал между словами (word-spacing), интервал между символами (letter-spacing), декоративное оформление текста (text-decoration), вертикальное выравнивание (vertical-align), трансформацию текста (text-transform), высоту строки (line-height) и параметры обтекания (clear).

Псевдоэлемент ::first-letter – оформляет первый символ абзаца, позволяя определить свойства шрифта (font), цвета и заднего плана (color и background), декоративное оформление текста (text-decoration), вертикальное выравнивание (vertical-align) – только если свойство float установлено в "none" (по умолчанию), трансформацию текста (text-transform), высоту строки (line-height), параметры обтекания (clear), отступы (margin), расстояние от обрамления (padding), параметры обрамления (border) и отделение от остального текста (float).

3
<style>
  div.first p {color: green; font-size: 11pt}
  div.first p::first-letter {color: red; font-size: 150%} /*первый символ*/
  div.first p::first-line {color: navy}  /*первая строка*/  
</style>

<body>
 <div class="first">
   <p>Текст 1</p>
   <p>Текст 2</p>
   <p>Текст 3</p>
 </div>
</body>
Результат:

В этом примере прописано:

Отобразить первую строку абзаца темно-синим цветом, все первые буквы абзаца – красным и в 1,5 раза большего размера. Остальную часть абзаца – отобразить зеленым.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, expedita. Natus iste laboriosam unde temporibus sapiente, inventore alias quisquam ex aliquid, vel, omnis atque illum culpa magnam eum placeat officiis.

Пример оформления страницы "Цытаты А.В. Суворова"