Псевдоелементи

Псевдоелементи прикріплюються до селекторам схожим чином, що і псевдокласи. Їх структура виглядає так: селектор:псевдоелемент {властивість: значення;} .

Буквиця і перша лінія

Псевдоелемент first-letter описує першу букву елемента, а first-line – перший рядок елемента. Наприклад, можна підготувати буквицю і перший рядок для абзацу завдяки цьому коду:

p:first-letter {
	font-size: 3em;
	float: left;
}

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

Псевдоелементи before та after застосовуються спільно з властивістю content для того, щоб розмістити контент з будь-якої зі сторін елемента, не вносячи змін в HTML.

Значенням властивості content може бути open-quote, close-quote, no-open-quote, no-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)
}

Виглядає дивно, чи не так? На жаль, але більша частина користувачів не зможуть захопитися ефектами before та after, тому що IE просто не розпізнає їх. Ну хіба хлопці з Microsoft не ліниві?