tolerant
7 лет назадЗаписки HTML-верстальщика: псевдоэлементы CSS
Всем хорошего рабочего дня!
В своих предыдущих статьях я рассказывал о селекторах CSS и псевдоклассах. Сегодня я хотел бы остановиться на таком понятии как псевдоэлементы.
Итак, псевдоэлементы служат в CSS как вспомогательные элементы для стилизации или унификации html-кода без добавления ненужных дополнительных тегов. Есть как невероятно полезные и незаменимые в работе псевдоэлементы, так и достаточно редко встречающиеся. В этой статье я расскажу о самых популярных и часто встречающихся:
- ::before - псевдоэлемент, который позволяет вставить нам какой-либо мнимый элемент, не добавляя никаких ненужных тегов в html-файл, избавляя его от ненужного нагромождения. К примеру, код:
div:before {content:'1';color:black;}вставит цифру "1" перед каждым дивом, без использования дополнительных тегов. - ::after - имеет такую же идею, как и ::before, но вставит нужный нам контент после указываемого тега. У этих двух псевдоэлементов невероятно большой функционал, и он очень помогает в повседневной работе. Например, при помощи CSS-свойств counter-increment мы можем создавать автоматические списки (подробнее тут: Записки HTML-верстальщика: делаем правильные нумерованные списки), а всем известный clearfix можно так же сделать при помощи ::before/::after.
- ::first-letter - позволяет стилизовать первую букву элемента, к которому мы применим этот псевдоэлемент.
- ::first-line - позволяет стилизовать первую строку элемента, к которому мы применим этот псевдоэлемент.
- ::selection - позволяет стилизовать текст, который мы выделяем левой кнопкой мыши.
- ::placeholder - позволяет стилизовать одноименный параметр внутри input или textarea (Работает только в Firefox и Chrome с добавлением приставок -webkit- и -moz-).
Это самые популярные псевдоэлементы, которые используются в повседневной верстке и иногда могут сделать Ваш сайт немного круче. Надеюсь, был полезен. Дальше-больше!)