使用：前/：后选择器添加边距元素周围

Question

我实现了（修改版）基因洛克林的“深度”，这工作得很好，这里的代码：

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

但我想用在：&之前：在选择器添加边距或填充之后，您知道某种间隙，可以将表单与周围的文本分开。

这是在我尝试使用这些选择器为特定段落提供一些间距而没有成功之后，我转向基于它们的目标属性设计这些选择器。

我意识到选择器的设计主要是为了实现自动文本，并且使用边距或填充（下面添加下面的查询），换行符，跨度，空分割，甚至使用JavaScript来完成此操作都非常简单创建一个元素，并且。但我想这样做：在&之前：之后。

这里的示例代码，我想获得工作：

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

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

的可能性，我认为可以防止这种工作...：前/：后需要被显示为块级，因为他们通常是内联的（但“深度”不需要这个？）和/或：之前/之后需要绝对定位。

非常感谢您的慷慨解答。

Answer 1

尝试指定display: block;。他们不需要是position: absolute;。

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

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