:before, :after и другие псевдоэлементы CSS

:before и :after CSS

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

Около элемента

Около <span>элемента</span>

Около элемента

<style type="text/css">
  span:before {content: ":before";} 
  span:after {content: ":after";} 
</style>

Около <span>элемента</span>

С помощью свойства position: absolute; можно вывести их за пределы контейнера тега.

Около элемента

<style type="text/css">
  span {position: relative; margin-left: 80px;}
  span:before, span:after {position: absolute;} 
  span:before {content: ":before"; left: -80px;} 
  span:after {content: ":after"; right: -60px;}  /* при отрицательных значениях, применять свойство left-right к ближней стороне */ 
</style>

Около <span>элемента</span>

content может принимать следующие значения:

"текст"	<style type="text/css">   b:after { content: " тут"; } </style> <b>Я</b>	Я
attr(параметр)	<style type="text/css">   b:after { content: attr(title); } </style> <b title=" тут">Я</b>	Я
url()	<style type="text/css">   b:before { content: url(http://www.blogger.com/img/icon_28_followers.png); } </style> <b> и Я</b>	и Я
counter	выводит значение счётчика и тип маркера - дополнительная информация
open-quote no-open-quote close-quote no-close-quote	<style type="text/css">   b { quotes: "\ab" "\bb"; } /* определяем вид кавычек */   b:before { content: open-quote; }   b:hover:before { content: no-open-quote; } /* отменяет открывающуюся кавычку */   b:after { content: close-quote; }   b:hover:after { content: no-close-quote; } /* отменяет закрывающуюся кавычку */ </style> <b>навести</b>	навести
none	<style type="text/css">   b:after { content: " тут"; }   b:hover:after { content: none; } </style> <b>навести</b>	навести

В качестве значения content могут выступать специальные символы, но в HEX кодировке, то есть вместо « должно быть \ab. Можно воспользоваться конвертером ниже, только вместо % указывайте \ (образец).

ASCII в HEX HEX в ASCII

Сделаем разрыв строки (аналог тега br) средствами CSS (пример использования).

<style type="text/css">
a.comment-link1:after {
  content: '\A';
  white-space: pre;}
</style>

<a href="#" class="comment-link1">после содержимого тега a следует разрыв строки</a>

Довольно часто в качестве значения content совсем не используют символы, оставляя кавычки пустыми.

<style type="text/css">
.b {
  position: relative;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #666;
  background-color: #f7f7f7;
}

.b:before, .b:after {
  content: "";
  position: absolute;
  left: 15px;
  border-style: solid;
  border-width: 20px 7px;
}

.b:before {
  border-color: transparent transparent #666 transparent;
  top: -40px;
}

.b:after {
  border-color: transparent transparent #f7f7f7 transparent;
  top: -38px;
}
</style>

<p class="b">сказал</p>

Здесь из border делают угол. :before нижний уголок, более тёмный, цветом рамки общего блока. :after верхний, тоном блока. Накладываем с помощью position: absolute один поверх другого. Уголочек может быть любой формы, в зависимости от длины и цвета каждого из четырёх сторон border (другой пример). Потренируемся с помощью формы ниже

border-width:
border-color:
border-radius:

И можно получить такой вариант: 4

<style type="text/css">
a.comment-link1 {
  position: relative; 
  padding: 2px 10px;
  border-radius: 5px;
  background-color: #666;
  text-decoration: none;
  color: #fff;}

a.comment-link1:after {
  content: "";
  position: absolute;
  left: 7px; 
  border-style: solid;
  border-width: 5px; 
  border-color:  #666 transparent transparent #666;
  bottom: -5px;}

a.comment-link1:hover {
  background-color: #ff3200;
}

a.comment-link1:hover:after {
  border-color: #ff3200 transparent transparent #ff3200;
}
</style>

<a href="#" class="comment-link1">4</a>

Тем же способом реализовывают и другие иконки CSS (автор).

Для встроенных элементов при использовании CSS спрайтов, для after и before будем задавать display: inline-block;.

Интересная реакция

#raz:after {
  content: "red";
  background: red;
}
#raz:active:after {
  content: "green";
  background: green;
}

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

:first-letter	:first-line	::selection
p:first-letter{color: red;}	p:first-line{color: red;}	p::selection{background: red;} p::-moz-selection{background: red;}
первый символ в тексте элемента	первая строка в тексте элемента	при выделении текста

Разница между ::selection и псевдоклассом :hover.

::selection	:hover
при выделении текста	при наведении на текст