::first-line

    0
    116

    ::first-line используется для стилизации первой строки форматированного текста.

    Псевдоэлемент ::first-line не выбирает первую строку текста если он объявлен как inline; т.е. к элементам, которые имеют свойство display: inline. Выбирает первую строку только элементов у которых значение display объявлено как: block, inline-block, table-cell, table-caption, или list-item.

    Количество охватываемого данным псевдоэлементом текста зависит от многих факторов, среди которых: ширина страницы, шрифт, размер шрифта и другие.

    Правила стилей используемые с ::first-line

    Свойства работающие с псевдоэлементом ::first-line:

    • Шрифт: font, font-style, font-variant, font-weight, font-size, line-height, и font-family.
    • Фон: background, background-color, background-image, background-position, background-repeat, background-size, и background-attachment
    • text-decoration, text-transform, letter-spacing, и word-spacing.

    В некоторых браузерах стили могут работать не корректно (читайте поддержка браузерами).

    Тонкости & Особенности

    Правила могут сработать и для элементов находящихся внутри блока к которому они применены, например:

    Если применить правила для div::first-line сработает на <p>.

    Если значение display равно inline-block, то все содержимое div, будет являться фокусом для этого псевдоэлемента. Если display = inline, то только слово «Привет»:

    Также обратите внимание на пример ниже, первая строка абзаца <p> не содержит какого-либо текста, CSS подразумевает, что первая строка пустая, т.к. там <br>.

    Различие между (:) и (::)

    Возможно, вы встретите или уже встречали два варианта написания псевдоэлементов с двойным или одинарным двоеточием.

    В CSS1 и CSS2 псевдоэлементы задавались используя одинарное двоеточие (:), как и псевдо-классы (например, :focus или :hover). В CSS3 было введено двойное двоеточие (::) для того, чтобы разделять псевдоэлементы от псевдо-классов.

    Все браузеры, которые поддерживают обозначение двойным двоеточием, также поддерживают и обозначение одинарным двоеточием. Поэтому, если вы не собираетесь поддерживать кроссбраузерность в Internet Explorer > 8, можете не беспокоиться.

    Пример

    В примере выше каждая первая строка текста изменена, в браузере Google Chrome не работает свойство text-transform, поэтому первая строка не в верхнем регистре, хотя правило присутствует. В других браузерах все работает исправно.

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

    Одинарное обозначение :after поддерживается в Chrome, Firefox, Safari, Opera, Internet Explorer 8+, на Android и iOS.

    Двойное обозначение ::after такой синтаксис поддерживается в тех же браузерах, но в Internet Explorer только с версии 9.

    В браузере Google Chrome не работает правило text-transform.

    ПОДЕЛИТЬСЯ
    Предыдущая статьяbackground-clip
    Следующая статья::first-letter
    Постоянный автор на exabyte.ws. Специализируюсь на Wordpress, Javascript & jQ, REST API. Любые вопросы связанные с Web разработкой вы можете задать лично или в группе вконтакте.

    ОСТАВЬТЕ ОТВЕТ

    Пожалуйста оставьте комментарий!
    Введите ваше имя