Псевдокласс after – вы наверняка уверены в том, что таковым он и является. Но на самом деле это псевдоэлемент. Это не так важно знать, давайте я лучше объясню, зачем он нужен.
Псевдоэлемент :after создает (внимание!) псевдоэлемент. Очевидная реальность. Это элемент, которого не существует в html-разметке. Но тем не менее css сам дает нам возможность создавать их. Для этого существуют псевдоэлементы :before и :after.
У кого с английским не совсем туго, тот уже примерно понял их значение. :after создает элемент, который будет находиться ПОСЛЕ элемента, указанного перед ним. То есть он должен быть привязан к какому-то селектору, который существует в html. Сам по себе существовать псевдоэлемент не может.
То есть если мы пропишем в таблице стилей так:
:after{
Какие-то свойства…
}
То это применится только ко всем подобным псевдоэлементам в ОБЩЕМ. Но ни одного из них не появиться на экране. Для этого нужно прописать, например, так:
P:after
Table: after
.footer:after
#header:after
Объясняю: в первом примере псевдоэлемент появится за каждым абзацом. Во втором примере – за каждой таблицей. В следующем примере псевдоэлемент будет расположен только за элементами, имеющими стилевой класс .footer. Четвертый вариант – за блоком с идентификатором header.
Где используется
Псевдоэлемент используется сплошь и рядом. Где для создания декоративных элементов, где для создания масок при наведении и т.д. Вот простой пример:
Я опять взял изображение города и поставил его в качестве фона тестовому блоку.
.city{
width: 450px;
height: 250px;
background: url(city.jpg);
}
Теперь сделаем так, чтобы при наведении на блок на него накладывался полупрозрачный фоновый цвет.
.city:hover:after{
background: rgba(15, 33, 156, 0.4);
width: 450px;
height: 250px;
content: '';
display: block;
}
Наведите курсор на картинку и вы увидите, как это происходит.
В общем, у псевдоэлемента миллион вариантов применения, его, как правило, используют вместе с before. Это такой же точно псевдоэлемент, отличий особы у него нет, разве только формально он создается он в разметке становится до того элемента, к которому его добавляют, а не после, как в случае с after.
Чтобы наш псевдоэлемент правильно отображался, для него нужно применять два обязательных свойства:
content: ''; — вообще свойство создано, чтобы вписывать какую-то текстовую информацию и выводить ее на экран, но даже если она не нужна, его все равно необходимо задавать.
display: block; — делает наш элемент блочным, чтобы для него можно было задавать размеры.
Вот, собственно, и все. Конечно, я написал очень мало, но я думаю вам и из этого понятно, для чего нужны такие элементы. А если понятно, то вы без труда сможете находить им применение в сайтостроении.