Перейти к контенту

Псевдоэлементы: структура, значения, свойства

Псевдоэлементы прикрепляются к селекторам схожим образом, что и псевдоклассы. Их структура выглядит так: селектор:псевдоэлемент { свойство: значение; }.

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

Псевдоэлемент 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 не ленивы?

 





Оцени статью

Средняя оценка / 5. Количество голосов:

Спасибо, помогите другим - напишите комментарий, добавьте информации к статье.

Или поделись статьей

Видим, что вы не нашли ответ на свой вопрос.

Помогите улучшить статью.

 

Пока нет комментариев.

Добавить комментарий

Ваш e-mail не будет опубликован.

СайдбарКомментарии (0)