Псевдоэлемент after и before
Приветствую Вас дорогие друзья, я бы хотел сегодня рассмотреть два псевдоэлемента, которые появились также в CSS3, и являются довольно часто используемыми, а называются они псевдоэлемент after и before. При их помощи мы можем выводить на странице нужный текст, который будет отображаться либо до содержимого элемента, либо после. Отсюда следует вывод, что псевдоэлемент after, выводит текст после содержимого, а псевдоэлемент before - до содержимого. И перед рассмотрением примера, хотел бы сказать, что данные псевдоэлементы работают совместно со свойством content. Ну а теперь для усвоения материала, рассмотрим два примера:
<html>
<head>
<title>Псевдоэлемент after</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<span>Меня зовут:</span>
</body>
</html>
И применим псевдоэлемент after.
span::after {
content: 'Денис';
}
Мы применяем изучаемый псевдоэлемент и получаем результат (Меня зовут Денис). Прошу заметить, что при этом html код никак не изменяется. Однако результат мы получаем тот, который нам нужен. И второй пример:
<html>
<head>
<title>Псевдоэлемент after</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<span>мое имя.</span>
</body>
</html>
Применим псевдоэлемент before, который добавит текст до содержимого элемента.
span::before {
content: 'Денис - ';
}
Как видите, все довольно легко и просто. При помощи псевдоэлемента after и before, мы можем получать и другие результаты. Это не означает, что мы обязаны использовать лишь одно свойство content, мы можем оставить его пустым, главное чтобы оно было, и использовать другие различные свойства, которые Вам необходимо применить в вашем задании. Ну а на этом завершим урок, я бы хотел, чтобы он стал полезен для Вас и, вы использовали полученные знания на практике.
