CSS псевдоэлемент ::first-line

Псевдоэлемент ::first-line применяет стиль к первой строке внутри блочного контейнера. Он не выбирает такие строчные элементы, как изображения или строчные таблицы.

Следующие CSS свойства могут быть использованы для применения стиля к ::first-line:

  • font свойства
  • background свойства
  • text-decoration, text-transform, letter-spacing, word-spacing, color.

::first-letter наследует примененные стили, используя ::first-line. Если использованы оба элемента, стили, указанные псевдоэлементом ::first-letter, переопределяют те стили, примененные псевдоэлементом ::first-line.

Псевдоэлемент ::first-line может быть использован с одним двоеточием :first-line, который также поддерживается всеми браузерами.

Версия

CSS1

Синтаксис

::first-line {
css declarations;
}

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p::first-line {
      color: #85d6de;
      text-transform: uppercase;
      }
    </style>
  </head>
  <body>
    <h2>Пример селектора ::first-line</h2>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
  </body>
</html>

Поддержка браузера

4.0+ 12.0+ 2.0+ 3.1+ 10.0+




Похожие статьи