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

::first-line
::first-letter
::before и ::after

Мы можем использовать псевдоэлементы, чтобы оформлять фрагменты элементов, такие как первая строка, или первая буква. Имейте в виду, что они должны быть применены к элементам уровня блока для того, чтобы вступили в силу.

Псевдоэлемент задаётся двумя двоеточиями: ::. Они не видны на экране, поэтому называются псевдоэлементами.

Для совместимости с существующими таблицами стилей, браузер должен понимать прежнее обозначения псевдоэлементов с одним двоеточием, введённые в CSS 1, 2 (:first-line, :first-letter, :before and :after). Эта совместимость не допускается для новых псевдоэлементов, введённых в этой спецификации.

::first-line

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


p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

Это длинный параграф, содержащий несколько строк. Первая строка будет отличаться от других строк в параграфе.

::first-letter

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


p::first-letter {
    float: left;
    font-size: 2em;
    font-weight: bold;
    font-family: cursive;
    padding-right:2px;
}

Этот код выберет все параграфы, и в них в свою очередь выберет первые буквы и применит к ним этот стиль.

Псевдоэлементы можно комбинировать с классами и идентификатороами.


p.intro::first-letter {
    color: #ff0000;
    font-size:200%;
}

Параграф, у которого первая буква имеет свой стиль.

Также можно применить несколько псевдоэлементовв к одному элементу.


p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

::before и ::after

Псевдоэлементы ::before и ::after позволяют добавлять содержимое (стили) до и после элемента, к которому были применены.

Для добавление контента внутри псевдоэлементов можно воспользоваться CSS-свойством content.


<style>
span#before::before { 
    content: "Добавлено до ";
	background-color: lightgray;
}

span#before {
	border: 1px black solid;
}
</style>

<span id="before">Образец псевдоэлемента ::before</span>

<Образец псевдоэлемента ::before

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

Внутри псевдоэлемента можно использовать картинку вместо обычного текста, и даже добавлять фоновое изображение.

Добавим изображение кота к заголовкам первого уровня перед текстом и к заголовкам второго уровня после текста.


h1::before {
  content: url(cat.png);
}

h2::after {
  content: url(cat.png);
}

Многие познакомились с этими псевдоэлементами при работе с "clear-fix hack".


.clearfix::after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }
.clearfix {
    *display: inline-block;
    _height: 1%;
}

Этот хак использует ::after чтобы добавить пробел после элемента, и запретить его обтекание.

Если необходимо добавить кавычки для цитаты:


blockquote:before {  
    content: open-quote;  
}  
blockquote:after {  
    content: close-quote;  
}

Созданные элементы по умолчанию inline-элементы, поэтому при указании высоты или ширины необходимо установить display: block.

Псевдоэлементы могут быть использованы вместе с псевдоклассами, в нашем примере это поможет добавить hover-эффект кавычкам:


blockquote:hover:after, blockquote:hover:before {  
    background-color: #555;  
}

Также можно применить свойство transition для плавного изменения цвета кавычек.

::selection

Псевдоэлемент ::selection действует на выделенный пользователем текст.


::selection {
  color: red;
  background: yellow;
}

Дополнительные материалы