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

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

---

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

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

open-quote

Вставляет открывающую кавычку, тип которой устанавливается с помощью стилевого свойства quote.

close-quote

Вставляет закрывающую кавычку.

Стилизация псевдоэлементов

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

blockquote:before {  
    content: open-quote;  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  /*цвет шрифта*/   
    background: #ddd;  /*цвет фона*/  
    float: left;  /*обтекание текстом*/  
    position: relative;  /*позиция*/  
    top: 30px;  /*отступ сверху*/  
    border-radius: 25px; /*закругление уголков блока*/   
   display: block; /*при указании высоты или ширины необходимо установить display: block:*/
    height: 25px;  /*высота*/  
    width: 25px;  /*ширина*/  
}  
blockquote:after {  
    content: close-quote;  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    background: #ddd;  
    float: right;  /*обтекание текстом справа*/  
    position: relative;  
    bottom: 40px;  /*отступ снизу*/  
    border-radius: 25px;  
  display: block;  
    height: 25px;  
    width: 25px;  
}  

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

IE	Opera	Chrome	Firefox	Safari
Internet Explorer 9	Opera 7 и выше	Chrome 2 и выше	Firefox 1 и выше	Safari 1 и выше