@raulvodov
UI/UX Designer

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

Пытаюсь отрисовать гамбургер менюшку, но почему-то не работают псевдоэлементы 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);
}
  • Вопрос задан
  • 1170 просмотров
Решения вопроса 2
TTATPuOT
@TTATPuOT
https://code.patriotovsky.ru/
У inline-элементов не бывает before или after.
Вы можете сделать span с display: inline-block; и всё заработает.
Ответ написан
raulvodov , что значит "не работает before и after" ?

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

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

Результат:
https://codepen.io/hisbvdis/pen/zYOLbXE
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы