Псевдоэлементы CSS это своего рода условные составные части уже существующих html тегов.

С точки зрения синтаксиса они ни чем не отличаются от псевдоклассов. Их схожесть также проявляется в некоторой «фантомности» того, к чему они применяются, только в отличие от псевдоклассов псевдоэлементы реагируют не на изменение состояния определенных тегов на странице, а создают своего рода фантомные составляющие части уже существующих тегов.

Как пользоваться селекторами псевдоэлементов CSS?

Задачей селектора псеводоэлемента CSS является выбор из структуры документа составных частей элементов подпадающих под характеристики селектора и спецификацию псевдоэлемента.

Задается он при помощи двуеточия после которого следует название используемого псевдоэлемента.

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

p:first-letter {
   font-size: 150%;
   color: red;
}

Нюансом при использовании псевдоэлементов CSS является то, что они должны идти в конце селектора. Тоесть такая запись работать не будет:

p:first-line span{
   color: red;
}

Какие бывают псевдоэлементы?

• :first-line — применяется к первой строке текста находящейся внутри тега. Длину строки мы обычно зараннее узнать не можем, поскольку она зависит от шрифта, его отображения в разных браузерах, размера окна (при резиновой верстке) и прочих нюансов. Позволяет изменять оформление только у текста и его фона (размер, цвет шрифта, фона и тд).
•  ::first-line — то же самое, что и :first-line, только для CSS 3.
• :first-letter – похож на предыдущий, отличается только тем, что стили применятся только к первому символу в тексте элемента. Работает, словно первая буква взята в отдельный тег.
• ::first-letter — то же самое, что и :first-letter, только для CSS 3.
• :before – добавляет содержимое перед элементом к которому применяется. Используется вместе со свойством content. К примеру:
  

  .tag:before {
     content: open-quote; /*открытая кавычка перед тегом*/
  }

  
  К нюансам использования относится: этот псевдоэлемент наследует оформление тега, к которому добавляется; поддерживает только none, block, inline, list-item значения свойства display для блочных элементов и none, inline значения для строчных элементов.
• :after — аналогичен :before, только при его использовании содержимое добавиться после элемента к которому он будет применен.
• ::before — то же самое, что и :before, только для CSS 3.
• ::after – то же самое, что и :after, только для CSS 3.
• ::selection – позволяет изменять оформление выделенного пользователем текста на сайте. Может изменять только цвет выделенного текста и цвет фона при выделении. Не работает в фаерфоксе.
• ::-moz-selection  - тоже самое, что и ::selection, только для фаерфокса.
• ::-ms-value — применяется только к тегам input, select. Позволяет изменять их оформление. Работает только для IE.
• ::-ms-reveal — применяется для оформления кнопки для просмотра пароля (при наличии атрибута type="password" у тега input у формы появится кнопка, которая при ее нажатии и удержании открывает цифры, которе в обычном состоянии заменяются точками). Работает только в IE.
• ::-ms-fill применяется только к элементу progress, позволяя изменять его оформление. Работает только в IE.
• ::-ms-expand позволяет стилизовать кнопку открытия списка у тега select у IE.
• ::-ms-clear – позволяет менять оформление кнопки очистки текстового поля в IE.
• ::-ms-check — дает возможность стилизовать флажки (checkbox) и переключатели (radio) у форм в IE.
• ::-ms-browse — применяется к тегу input с атрибутом type="file". Работает только в IE. Дает возможность задать оформление кнопки «обзор».

Подводя итоги

Псевдоэлементы css используются для упрощения оформления html документа в некоторых частных случаях. Они дают нам возможность не добавлять лишние теги, а прописать оформление к уже существующим тегам в CSS.

Чаще всего на практике используются :after и :before (к примеру для добавления маркеров спискам, более сложного оформления выпадающего меню), чуть реже :first-letter и :first-line. Области же применения остальных псевдоэлементов достаточно экзотичны и крайне редко встречаются в практике.

Да и не стоит забывать, что только эти 4 селектора поддерживаются всеми браузерами достаточно давно. Остальные псевдоэлементы начали входить в обиход с появлением стандарта CSS3, что означает отсутствие их поддержки у старых браузеров.