使用 :before/:after 选择器在元素周围添加边距

Question

我实现了 Gene Locklin 的“深度”（修改版），效果很好，代码如下：

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

但我想使用 :before 和 :after 选择器添加边距或填充，你知道某种间隙，将表单与周围的文本分开。

这是在我尝试使用这些选择器在特定段落周围留出一些间距之后出现的，但没有成功，我转向根据它们的目标属性设置它们的样式。

我意识到选择器的设计主要是为了促进自动文本，并且使用边距或填充（在下面的查询中添加）、换行符、跨度、空分割甚至使用 JavaScript 来创建非常容易一个元素，并且 .但我想用 :before & :after 来做到这一点。

这是我想要开始工作的示例代码：

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

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

我认为可能会阻止它工作... :before/:after 需要显示为块级，因为它们通常是内联的（但“深度”不需要这个？）和/或： before/:after 需要绝对定位。

提前感谢您的慷慨投入。

Answer 1

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

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

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