::after работает только с 'content', почему?

Question

[Nikola24]

Пытался протестировать одну штуку, после двух блоков с float, задать :after c clear:both, но почему то ничего не происходит, если я добавляю content: "text"; то сразу всё работает. Почему так происходит?

<main class="clear">
		<div class="first"></div>
		<div class="second"></div>
	</main>
	<div class="three"></div>

.first,.second,.three{
		background-color: red;
		display: block;
		width: 50px;
		height: 50px;
		margin: 20px;
	}
	.first{
		float: left;
	}
	.second{
		float: right;
	}
	.three{
		background-color: blue;
	}
	.clear{
		width: 200px;
	}
	main:after{
		clear: both;
	}

Comments

[Сергей delphinpro]

Элемент без содержимого как вы представляете? (Пустое содержимое - тоже содержимое)
А если это псевдоэлемент, то изначально он и не существует. Чтобы он появился, нужно чтобы у него появилось содержимое.

Answer 1

[Elwen]

:before и :after используются только в связке с content. Что бы создать пустой псевдоэлемент добавьте content: " " или content: "\00a0"

Comments

[Сергей delphinpro]

просто content: ''; не нужны там никакие символы.

Answer 2

[KlassT]

Стандарт css