Uso: antes /: después de selectores para añadir márgenes alrededor de los elementos

Question

implementé (una versión modificada del) de Gene locklin 'profundidad' que funciona muy bien, aquí está el código:

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: ""; 
} 

Pero me gustaría utilizar the: before &: después de los selectores para agregar márgenes o relleno, conoce algún tipo de espacio, para separar un formulario del texto circundante.

Esto viene después de intentar usar estos selectores para dar un espacio alrededor de párrafos específicos, sin éxito recurrí a diseñarlos en función de sus atributos de destino.

Me di cuenta de que los selectores se diseñaron principalmente para facilitar el texto automático y que es perfectamente fácil hacerlo con márgenes o relleno (se agregaron las siguientes consultas), saltos de línea, tramos, una división vacía o incluso JavaScript para crea un elemento, y. Pero me gustaría hacer esto con: antes de &: después.

Aquí está el código de ejemplo que me gustaría conseguir trabajo:

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

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

Posibilidades creo que puede ser prevenir que esto trabaja ...: antes /: después de la necesidad de mostrar como a nivel de bloque, ya que normalmente están en línea (pero la "profundidad" no necesita esto?) y/o: antes/después de requieren un posicionamiento absoluto.

Gracias de antemano por su generosa contribución.

Answer 1

Intente especificar display: block;. No necesitan ser position: absolute;.

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

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