Вы здесь: Главная > CSS > Псевдоэлементы

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

Опубликовано автором Просмотры: 16

Псевдоэлементы присасываются к селекторам как псевдоклассы, принимая форму

selector:pseudoelement { property: value; }

Таких присосок четыре.

Первые буквы и первые строки

Псевдоэлемент first-letter применяется к первой букве внутри поля, а псевдоэлемент first-line — к самой верхней отображаемой строке в поле.

pseudo elements

Нацеливание на первую букву и первую строку абзаца с помощью псевдоэлементов.

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

p {
    font-size: 12px;
}

p:first-letter {
    font-size: 24px;
    float: left;
}

p:first-line {
    font-weight: bold;
}

Спецификации CSS 3 предполагают, что псевдоэлементы должны содержать два двоеточия, поэтому p::first-line отличается от p:first-line. Это помогает отличать псевдоэлементы от псевдоклассов.

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

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

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

Значением свойства content может быть open-quote, close-quote, любая строка, заключённая в кавычки, или любое изображение, использующее url (imagename).

blockquote:before {
    content: open-quote;
}

blockquote:after {
    content: close-quote;
}

li:before {
    content: "POW! ";
}

p:before {
    content: url(images/jam.jpg);
}

Свойство content эффективно создаёт ещё одно поле для воспроизведения, так что вы также можете добавлять стили к “презентационному контенту”:

li:before {
    content: "POW! ";
    background: red;
    color: #fc0;
}

Страницы в тему:

Добавить комментарий