6

我实现了（修改版）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/：之后需要绝对定位。

预先感谢您的慷慨投入。

4

1 回答 1

15

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

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

form:before {
  content: ' ';
  display: block;
  height: 20px;
}
于 2011-09-20T01:48:15.893 回答