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

Русский перевод: Псевдоэлементы

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

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

Псевдоелемент 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 їх не розпізнає.

← Скорочення властивостей | Вбудовані, внутрішні та зовнішні стилі →