Взяла пример из интернета и все-равно ничего не работает. Что не так?
<!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 ";
}
Простой
