Javascript-форум - CSS свойства :before и :after

Ребята привет,

экспериментирую со свойствами 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>

Спасибо за помощь