使用:before/:after选择器在元素周围添加边距 [英] Using :before/:after Selectors to add Margins Around Elements

问题描述

我实现了Gene Locklin(深度)的深度"(修改后的版本)，效果很好，这是代码:

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

但是我想使用:before& :在选择器添加边距或填充后，您会知道某种间隙，可以将表格与周围的文本分开.

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.

我意识到选择器的设计主要是为了方便自动文本，并且通过边距或填充(在下面的查询后添加)，换行符，跨度，空分隔甚至使用JavaScript来创建都非常容易一个元素，以及.但我想用:before& :之后.

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

我认为可能阻止了它的工作...:before/:after通常需要显示为块级，因为它们通常是内联的(但深度"不需要吗?)和/或:之前/之后需要绝对定位.

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.

推荐答案

尝试指定display: block;.他们不必是position: absolute;.

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

这篇关于使用:before/:after选择器在元素周围添加边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！