@Katie99

Почему у меня before и after вообще никак не работают?

Взяла пример из интернета и все-равно ничего не работает. Что не так?
<!DOCTYPE html>
<html>
<head>
	<title>df</title>
	<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>

<div class="test">
  <div class="content">Content</div>
</div>

</body>
</html>


body{
  background-color: pink;
}


// основной контейнер (большой серый)
.test {
  width: 300px;
  height: 150px;
  background: #f0f0f0;
}
// его содержимое - темно серый прямоугольник
.test .content {
 width: 100px;
 height: 50px;
 background: #d0d0d0;
}
// псевдо-класс after, желтый
.test::after {
 width: 100px;
 height: 50px;
 background: #f0f000;
 display: block;
 content: " After ";
}
// псевдо-класс before, лиловый
.test::before {
 width: 100px;
 height: 50px;
 background: #f000f0;
 display: block;
 content: " iiiBefore ";
}


5e0946ed76785699798220.png
  • Вопрос задан
  • 163 просмотра
Решения вопроса 1
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
Потому что такой синтаксис комментариев в CSS недопустим. Он вам и рушит CSS.

Я про:
// комментарий

Вы явно скопировали код для препроцессора а-ля SASS. В CSS комментарии имеют исключительно следующий синтаксис:
/* CSS-комментарий */
https://developer.mozilla.org/ru/docs/Web/CSS/%D0%...

Заменил на нормальные комментарии, и всё заработало:
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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