Всем доброго времени суток и давайте рассмотрим следующий пример
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Псевдоселекторы :before и :after</title>
</head>
<body>
<style>
.string p:before{
Content:'Начало строки | ';
}
.string p:after{
Content:'| Конец строки';
}
</style>
<div class="string">
<p>Строка 1</p>
<p>Строка 2</p>
<p>Строка 3</p>
<p>Строка 4</p>
<p>Строка 5</p>
</div>
</body>
</html>как видите в примере у нас заданы пять строк к которым в стилях мы применили псевдоселекторы :before и :after.
:before - позволяет вставляет элемент перед контентом.
:after - вставляет элемент после контента
Также следует понимать что для того чтобы вставить контент с помощью :before и :after нам необходимо указать свойство Content в котором следовательно у указывается сам контент. Если мы заглянем в исходный код страницы, то мы не увидим добавляемый контент вместо него будут указываться наши псевдоселекторы.
Мы можем вставляемым элементам также задавать свойства к примеру:
<style>
.string p:before{
Content:'Начало строки | ';
font-weight:bold;
}
.string p:after{
Content:'| Конец строки';
opacity:0.5;
}
</style>
<div class="string">
<p>Строка 1</p>
<p>Строка 2</p>
<p>Строка 3</p>
<p>Строка 4</p>
<p>Строка 5</p>
</div>здесь элементам добавляемым в начале, мы указали свойство bold в результате чего текст стал жирным , а элементам вставляемым после свойство opacity изменяя прозрачность на 50%;
Пользуясь данными псевдоселекторами мы можем создавать очень интересные эффекты к примеру.
<style>
button:hover{
color:rgba(0,0,0,0);
}
button:hover:before{
padding-left:33px;
Content:"Нажми на меня";
color:rgba(0,0,0,1);
}
</style>
<button>Кнопка</button>здесь у нас есть кнопка при наведении прозрачность ее текста меняется на ноль , то есть текст становится невидимым, однако мы также с помощью псевдоселектора :before добавляем текст с прозрачностью 1 и делаем небольшой отсуп слева для симметрии в результате чего у нас происходить визуальная подмена текста. Вот на таком примере я хочу показать вам как вы можете играться с контентом с помощью CSS.
Бонусом к данной статье пойдет рассмотрение псевдоселектора first-letter
<style>
p:first-letter{
font-weight: bold;
font-size:30px;
}
</style>
<p>текст</p>данный селектор если вы заметили позволяет стилизовать первую букву контента элемента к которому он применен. В результате чего можно очень выразительно стилизовать ваш текст.
На этом дорогие друзья данная статья подходит к концу дальше дело за вами просто включаете свое воображение на полную мощность и вперед.
Я желаю вам удачи и всего самого хорошего пока.
