Псевдоэлементы CSS

Псевдоэлементы позволяют задать стиль для части элемента (например, для первой буквы или первой строки абзаца), а также генерировать содержимое, которого нет в HTML-коде документа.

Псевдоэлемент состоит из двух двоеточий ( :: ) и имени. Двойное двоеточие было введено в CSS3 для того, чтобы отделить псевдоэлементы от псевдоклассов. Однако для совместимости с прежними таблицами стилей допускается использовать одинарное двоеточие( : ).

Пример

<style type="text/css">
    p::first-line {
        font-weight: bold;
    }
</style>
<p>
    При редактировании CSS-файла возникает противоречивая задача. С одной стороны код должен быть удобным для восприятия и редактирования, быстрого отыскания нужного селектора, для чего активно применяются отбивки, комментарии, пробелы и символы табуляции. С другой стороны, объем кода должен быть компактным и не содержать в себе ничего лишнего. Компактность позволяет несколько ускорить загрузку сайта и повысить его производительность.
</p>
<p>
    Данное противоречие решается наличием двух версий CSS-файла: один для редактирования, а второй для загрузки на сервер. Сам же процесс сокращения кода называется минимизацией и вполне автоматизирован с помощью специализированных программ или сетевых сервисов. Но если приходится часто вносить изменения в CSS-файл, то процесс минимизации становится неудобным. Сами посудите, вначале надо отредактировать файл, затем его минимизировать и полученный код сохранить в файл, который нужно залить на сервер. Слишком много действий приходится совершать ради одного изменения. Логичнее было бы возложить задачу минимизации на сайт. Загрузили файл на сервер, и вот он уже в компактном виде отдается посетителям. Одно из таких универсальных решений называется minify, это библиотека на PHP5. Она минимизирует, объединяет и кэширует CSS-файлы, а также JavaScript.
</p>

Псевдоэлемент ::first-letter дает возможность оформить текст "буквицами".

Пример

<style type="text/css">
    p::first-letter {
        font: italic 40px Georgia, serif;
    }
</style>
<p>
    За горами, за лесами,<br>
    За широкими морями,<br>
    Не на небе – на земле<br>
    Жил старик в одном селе...
</p>

Псевдоэлементы ::before и ::after используются вместе со свойством content и наследуют стиль от элемента, к которому добавляются.

При добавлении ::before или ::after к блочному элементу их свойство display может принимать значения block, inline, none, list-item. Все остальные будут восприниматься как block.

При добавлении ::before или ::after к строчному элементу их свойство display может принимать значения inline и none. Все остальные будут восприниматься как inline.

Пример

<style type="text/css">
    li {
        list-style: none;
    }
    li::before {
        content: "\25BA";
        padding-right: 5px;
    }
</style>
<ul>
    <li>&alpha; – альфа</li>
    <li>&beta;  – бета</li>
    <li>&gamma; – гамма</li>
</ul>

К выделенному тексту можно применять свойства color, background и background-color.

Пример

<style type="text/css">
    p::selection {
        background-color: #ff0;
    }
    p::-moz-selection {
        background-color: #ff0;
    }
</style>
<p>Выделите левой кнопкой мыши текст этого абзаца, и он будет на желтом фоне.</p>

Смотрите также:

• Свод стилей
• Псевдоклассы
• Как обратиться к свойствам CSS-стилей из JavaScript