Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Псевдоэлементы и добавляемый контент

.

Псевдоэлементы и добавляемый контент

В дополнение к псевдоклассам CSS предоставляют нам доступ к псевдоэлементам. Последние позволяют выбирать текст, представляющий собой часть документа, которую выделить другим способом невозможно или очень сложно. С другой стороны, псевдоэлементы представляют некую структуру, выходящую за рамки модели DOM.

К примеру, все текстовые блоки имеют первую букву и первую строку, но как получить к ним доступ, если только не обернув тегами span? CSS предлагает псевдоэлементы : : first-letter и : : first-line, выделяющие первую букву и первую строку соответственно. Их можно писать также и с одним двоеточием — : first-line и : first-letter.

: before и :rafter

Псевдоэлементы : : before и : : after связаны не с существующим контентом, а с определенным местом в разметке, куда планируется добавить контент непосредственно из CSS. И хотя этот контент не будет элементом DOM, его все-таки можно стилизовать.

Чтобы добавить контент для псевдоэлемента, используйте свойство content. Предположим, вы хотите, чтобы текст всех внешних ссылок на вашем сайте заканчивался указанием URL в круглых скобках, чтобы вашим посетителям было совершенно ясно, что ссылка ведет на внешний ресурс.

Можно, конечно, прописать это в разметке страницы, но гораздо удобнее использовать комбинацию селектора attr и псевдоэлемента

: :after:

Псевдоэлементы и добавляемый контент

attr () дает доступ к любому атрибуту выбранного элемента, и здесь мы используем его для показа URL ссылки. Как вы помните, a [href "=http] означает «любой элемент, атрибут href которого начинается с http»; иными словами, внешние ссылки.

Вот еще один пример:

Псевдоэлементы и добавляемый контент

Эти стили добавляют иконку PDF icon и текст «(PDF)» к тексту всех ссылок, ведущих на документы PDF. Как вы помните, селектор [attr$=val] проверяет окончания атрибутов, поэтому document, pdf будет считаться совпадением, a page. html — нет.

:: selection

Псевдоэлемент : : selection относится к выделенному тексту. Его поддерживает WebKit, а с префиксом -moz — еще и Firefox. Давайте применим его в HTML5 Herald для того, чтобы фон выделения и цвет текста сочетались с монохромным стилем всего сайта:

Псевдоэлементы и добавляемый контент


.

Читайте так же:
Not found