Псевдоэлементы в CSS
Псведоэлементы в CSS это элемент своего родительского тега. Он не существует в HTML теле пока не укажем его в свойствах CSS!
С помощью псевдоэлемента можно вставить нужный объект в тело страницы, и его не будет в исходном коде, а только в отредеренном варианте браузера. Обычно используется для стилизации элементов
Начинаются они с двойного двоеточия.
Выбор первой буквы каждого элемента. Пример выбрать первую буквы параграфа: p::first-letter
::first-letter
Выбор первой строки каждого элемента. Пример выбрать первую строку параграфа: p::first-line
::first-line
Добавляет элемент с содержимым перед содержимым каждого элемента. Пример создаст контент перед переграфом: p::before
::before
Добавляет элемент с содержимым после содержимым каждого элемента. Пример создаст контент после параграфа: p::after
::after
Стилизует текст из атрибута placeholder. Пример: input::placeholder
::placeholder
Примеры использования ::before и ::after
Поместим элемент :before сбоку span
Как мы видим, в элемент before и after можно создать любой контент с помощью content и стилизовать его.
Пишем любой текст и вставляем новый
p span.text_before::before {
content: 'Текст!';
color:green;
}
Пишем любой текст и вставляем новый
p span.text_after::after {
content: 'Текст!';
color:red;
}
Пишем любой текст и вставляем иконку телефона
p span.phone_before::before {
content: '\260E';
color:green;
font-size:20px;
}
Пишем любой текст и вставляем иконку телефона
p span.phone_after::after {
content: '\260E';
color:red;
font-size:20px;
}
Пишем любой текст и вставляем картинку сбоку
p.check_before::before{
content: '';
width: 20px;
height: 20px;
background: url(/img/icons/check-blue.svg) no-repeat;
display: inline-block;
margin-right: 10px;
}
Пишем любой текст и вставляем картинку сбоку
p.check_after::after{
content: '';
width: 20px;
height: 20px;
background: url(/img/icons/check-blue.svg) no-repeat;
display: inline-block;
margin-left: 10px;
}
Пример использования ::first-letter
Пишем любой текст и вставляем картинку сбоку
Вторая строка обычного параграфа
Супер текст какого нибудь текста
p.first::first-letter{
color: red;
font-weight: bold;
font-size: 24px;
}
Пример использования ::placeholder
input{
padding:5px;
background: #ebebeb;
color:#000;
}
input::placeholder{
font-size: 18px;
color: red;
font-weight: bold;
}
