Из-за чего не работает before и after?

Question

[Raul Abdullin]

Пытаюсь отрисовать гамбургер менюшку, но почему-то не работают псевдоэлементы before и after?

<div class="hamburger-menu">
	<a href="#" class="menu-btn">
		<span></span>
	</a>				
</div>

.main-header .hamburger-menu {
	display: flex;
	align-items: center;
}

.main-header .menu-btn {	
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: #FB7DA4;
	background-image: linear-gradient(to right, #FBA9A2, #FB7DA4);
	border-radius: 50%;
	margin-right: 30px;
}

.main-header .hamburger-menu span,
.main-header .hamburger-menu span::before,
.main-header .hamburger-menu span::after {
	background-color: #fff;
	width: 16px;
	height: 2px;
}

.main-header .hamburger-menu span::before,
.main-header .hamburger-menu span::after {
	content: '';
}

.main-header .hamburger-menu span::before {
	transform: translateY(-5px);
}

.main-header .hamburger-menu span::after {
	transform: translateY(5px);
}

Answer 1

[Антон Неверов]

У inline-элементов не бывает before или after.
Вы можете сделать span с display: inline-block; и всё заработает.

Comments

[Raul Abdullin]

Я добавил вместо display: inline-block; position: absolute; и тоже сработало :)

[Rustam Bainazarov]

Всё там работает у inline:



А вот трансформации, да, с inline не работают.

[Александр Алексеев]

raulvodov, работает
псевдоэлементов не бывает у тегов без контента
их надо понимать буквально before content и after content
поэтому у таких блоков как hr br img их нет
так же раньше давно их не было у пустых блоков, т к нет контента (по крайней мере в ФФ)

Answer 2

[Рома Зварич]

raulvodov , что значит "не работает before и after" ?

Они присутствуют в разметке. Просто они строчные и на них не действуют свойства width и height

Добавьте для них (псевдоэлементов ::before и ::after) свойство display: block; и размеры применятся, а элементы станут видимыми

Результат:
https://codepen.io/hisbvdis/pen/zYOLbXE