Hello. In this code (to make the link work, remove the spaces before and after the dot) http://jsfiddle.net/mmnoyjoL/5/ I cannot add a block using the :: after pseudo-element. The orange block (size 700 * 300) should be on top of the blue (300 * 300). Therefore, I used z-index, and also it does not work out for me to align the orange block in the middle of the gray (main container). margin: auto; in this case does not work.

Tell me how you can implement this. Thank.

.main{ height: 500px; width: 100%; position: relative; background-color: #c6c6c6; } .top{ width: 700px; height: 300px; position: absolute; background-color: #ffcb56; z-index: 1; } .under_top{ width: 300px; height: 300px; position: absolute; background-color: #6a56ff; top: 50px; left: 450px; } 
 <div class="main"> <div class="top"></div> <div class="under_top"></div> </div>

  • in styles not after element - Grundy
  • dude doesn't know what he wants - user33274
  • dude knows what he wants. Just doesn't know how to do it - Slivki show

2 answers 2

Change the styles of the orange block as follows:

 .top{ width: 700px; height: 300px; position: relative; margin: 0 auto; background-color: #ffcb56; z-index: 1; }

And about the block through ::after did not understand. Which unit and where.

     div { width:100px; height:100px; background:red; position:relative; color:#fff; } div:after { content:"вот так это делается"; display:none; width:150px; padding:13px 20px; background:#ccc; background-size:100% 100%; position:absolute; right:-200px; top:0; transition:.5s; } div:hover:after{ display:block; } 
     <div>Наведи на меня</div>

    It's about after