Ребята привет,
экспериментирую со свойствами css :before и :after. Идея такая, есть контейнер, а в нем блок. У этого блока дополнительно еще заданы свойства :before и :after. В целом вроде бы понял как работает... но если с левым блоком проблем нет, то с правым блоком (который :after) есть вопросы. Там появляется горизонтальная прокрутка. Не могу понять почему...
С левым блоком прокрутки не возникает. Код правого блока аналогичен левому.
Вот код странички:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>test html</title>
<style type="text/css">
#wrap{
width: 1008px;
margin:0 auto;
position: relative;
z-index: 1;
}
.block{
width: 1008px;
height: 286px;
position: relative;
background:#ccc;
}
.block:before{
content:"before";
position:absolute;
left:-296px;
top:0px;
width:296px;
height:100%;
background:#3FF;
background-position: 100% 0;
z-index:-1;
}
.block:after{
content:"after";
position:absolute;
right:-296px;
top:0px;
width:296px;
height:100%;
background:#3FF;
background-position: 100% 0;
z-index:-1;
}
</style>
</head>
<body>
<div id="wrap">
<div class="block"><h1> test block</h1></div>
</div>
</body>
</html>
Спасибо за помощь