Псевдокласс after — зачем он нужен?

Псевдокласс 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; — делает наш элемент блочным, чтобы для него можно было задавать размеры.

Вот, собственно, и все. Конечно, я написал очень мало, но я думаю вам и из этого понятно, для чего нужны такие элементы. А если понятно, то вы без труда сможете находить им применение в сайтостроении.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: