Using :before/:after Selectors to add Margins Around Elements

Question

I implemented (a modified version of) Gene Locklin's 'depth' which works just fine, here's the code:

body:before {
    height: 10px;
    width: 110%;
    position: fixed;
    top: -10px;
    left: -10px;
    z-index: 6;
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.8);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.8);
    box-shadow: 0px 0px 10px rgba(0,0,0,0.8);
    content: "";
}

But I would like to use the :before & :after selectors to add margins or padding, you know some kind of gap, to separate a form from the surrounding text.

This comes after me trying to use these selectors to give some spacing around specific paragraphs, without success I turned to styling these on the basis of their target attributes.

I realize that the selectors were designed primarily to facilite auto-text and that it's perfectly easy to do this with margins or padding (added following queries below),line breaks, spans, an empty division, or even using JavaScript to create an element, and . But I would like to do this with :before & :after.

Here's the example code that I would like to get working:

form:before {
    height: 20px;
    content: "";
}

form:after {
    height: 20px;
    content: "";
    }

Possibilities I think may be preventing this from working... :before/:after need to be displayed as block-level as they are normally inline (but the 'depth' doesn't need this?) and/or :before/:after require absolute positioning.

Thank you in advance for your generous input.

Answer 1

Try specifying display: block;. They don't need to be position: absolute;.

form:after {
  content: ' ';
  display: block;
  height: 20px;
}

form:before {
  content: ' ';
  display: block;
  height: 20px;
}