alt text

Hi, the rubber block can be of different lengths and / or heights. I thought to do with pseudo-elements, but they can not be slipped under the main unit.

Help find the most correct solution?

Here's what I got:

* { margin: 0; padding: 0; } body { margin: 50px; } .un__shadow { display: block; position: relative; z-index: 2; width: 200px; height: 200px; padding: 20px; border: 1px solid #ccc; background: #fff; } .un__shadow:before { content: ''; position: absolute; width: 100%; height: 100%; bottom: -4px; right: -4px; border: 1px solid #ccc; } .un__shadow:after { content: ''; position: absolute; width: 100%; height: 100%; bottom: -6px; right: -6px; border: 1px solid #ccc; 
 <div class="un__shadow"> <h1>Some details</h1> <p>Some content.</p> </div>

Here is the fiddle: http://jsfiddle.net/Unk4N/

    2 answers 2

    I thought to do with pseudo-elements, but they can not be slipped under the main unit.

    Who told you that?

     #custom, #custom::before, #custom::after { border: 1px solid #000000; height: 200px; width: 200px; } #custom { background: #c3c3c3; position: relative; } #custom::before, #custom::after { background: #ffffff; content: ""; position: absolute; } #custom::before { bottom: -7px; right: -7px; z-index: -2; } #custom::after { bottom: -4px; right: -4px; z-index: -1; } 
     <div id="custom"> <h1>Some details</h1> <p>Some content.</p> </div>

    JSFiddle example

    • Updated the answer. Now correctly shows the content in the first block. - VenZell
    • Thank you very much !!! - ferrari
    • @Arhad please do not remove the JSFiddle links from my answers. - VenZell
    • @VenZell, I understand, I will not. On the Rights of Pure Curiosity: Why? - ߊߚߤߘ
    • 3
      @Arhad, because on jsfiddle anyone can experiment with the code. And with the snippet, this feature is limited. - Qwertiy ♦

    http://jsfiddle.net/Vertigo/kcxmY/

    • Can it be easier to use before and after? - Vitaly Zaslavsky
    • support I would do that too - mountpoint
    • Maybe easier. Describe this method, for me, too, will be an experience. - Dmitry Klimenko
    • webmasters.by/articles/html-coding/ ... Here you can see a similar thing - Vitaly Zaslavsky