:before 如何在 CSS 中工作？答案

【问题标题】：How does :before work in css?:before 如何在 CSS 中工作？
【发布时间】：2014-02-18 08:58:01
【问题描述】：

在代码中：

<!DOCTYPE html>
<html>
<head>
<style>
.parent {
    position: absolute;
    top:500px;  
    width:400px;
    border:1px solid green;
} 

.parent:before {
    z-index:-1;
    content:'';
    position:absolute;

    opacity:0.5;
    width:400px;
    height:200px;
    background-image:url('wallpaper324845.jpg');
    border:1px solid red;
}

.child {
    Color:black;
    border:1px solid black;
}
</style>
</head>

<body>
<div class="parent">
    <div class="child">Hello I am child</div>
</div>
</body>

</html>

我正在尝试创建一个透明背景，如此线程中所述：How to set opacity in parent div and not affect in child div?。

查看第 4 个答案中的代码。这是如何工作的，我对.parent 和.parent:before 的使用感到困惑。我认为这会在每个父元素之前创建一个 .parent:before 元素。真的很困惑这是如何工作的？

【问题讨论】：

参考这个MDN页面：developer.mozilla.org/en-US/docs/Web/CSS/::before

标签： html css pseudo-element css-content

【解决方案1】：

:before使用CSS创建一个虚拟内容，所以在上面的例子中，作者使用了sn-p下面的意思

.parent:before{
   z-index:-1;
   content:'';
   position:absolute;
   opacity:0.5;
   width:400px;
   height:200px;
   background-image:url('wallpaper324845.jpg');
   border:1px solid red;
}

他正在使用:before 创建一个虚拟元素，然后他定位absolute，分配一些维度，并分配background，以确保它保持在div 内容下方，他使用@987654333 @

换句话说，:before、:after 只是假设在您的div 中嵌套了两个span 元素，但是通过使用pseudo 元素，您不需要像您一样拥有span可以用伪元素实现同样的效果。

假设你有这样的东西

<div>
    Hello
    <span></span>
</div>

div {
   position: relative; 
}

div span {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #f00;
    z-index: -1;
    left: 0;
    top: 0;
}

Demo

也可以使用:before 或:after 实现，标记保持不变，但CSS 类似

div {
   position: relative; 
}

div:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #f00;
    z-index: -1;
    left: 0;
    top: 0;
}

Demo

因此，它只是在 HTML 中为您节省了一个空元素，但如果您查看上面的 CSS，我使用的是 content 属性，它总是与 :before 或 :after 关联，是的，它是必需的，即使您将其留空。

另外，请注意:before 和:after 生成的内容是内联，因此为了使height、width 工作，您需要明确提及display: block; 或@987654352 @ 如果你想让它成为 block 级别，但在这种特殊情况下，你不需要它，因为伪元素位于 absolute

div:after {
    content: "Hello";
    margin-top: 20px; /* This wont work as pseudo is inline by default */
}

Demo

所以让它block或inline-block

Demo

【讨论】：

感谢您的解释。只是为了澄清一点“您需要明确提及 display:block; 或 display:inline-block;”作者在他/她的例子中没有使用它，你也没有使用它，你能解释一下为什么
@user3247608 因为他使用的是position: absolute; :) 所以你不需要定义display: block;

【解决方案2】：

作者使用 :before 和 :after 伪元素指定生成内容的样式和位置。正如它们的名字所示，:before 和:after 伪元素指定了元素文档树内容之前和之后的内容位置。 'content' 属性与这些伪元素一起指定插入的内容。

下面是一个以 HTML 为根的文档树。

HTML
.HEAD    
..TITLE
.BODY
..H1
..P
..UL
...LI
...LI
...LI

例如，以下规则在每个“class”属性值为“note”的P元素的内容之前插入字符串“Note:”：

p.note:before { content: "Note: " }

元素生成的格式化对象（例如框）包括生成的内容。因此，例如，将上述样式表更改为：

p.note:before { content: "Note: " }
p.note        { border: solid green }

将导致整个段落周围呈现一个纯绿色边框，包括初始字符串。

:before 和 :after 伪元素从它们所附加的文档树中的元素继承任何可继承的属性。

例如，以下规则在每个 Q 元素之前插入一个左引号。引号的颜色将是红色，但字体将与 Q 元素其余部分的字体相同：

q:before {
  content: open-quote;
  color: red
}

在 :before 或 :after 伪元素声明中，非继承属性采用它们的初始值。

因此，例如，因为 'display' 属性的初始值为 'inline'，所以前面示例中的引号作为内联框插入（即，与元素的初始文本内容在同一行）。下一个示例将 'display' 属性显式设置为 'block'，以便插入的文本变成一个块：

body:after {
    content: "The End";
    display: block;
    margin-top: 2em;
    text-align: center;
}

:before 和 :after 伪元素元素与其他框（例如插入框）交互，就好像它们是插入相关元素中的真实元素一样。

例如，以下文档片段和样式表：

<h2> Header </h2>               h2 { display: run-in; }
<p> Text </p>                   p:before { display: block; content: 'Some'; }

...将以与以下文档片段和样式表完全相同的方式呈现：

<h2> Header </h2>            h2 { display: run-in; }
<p><span>Some</span> Text </p>  span { display: block }

同样，以下文档片段和样式表：

<h2> Header </h2>     h2 { display: run-in; }
                      h2:after { display: block; content: 'Thing'; }
<p> Text </p>

...将以与以下文档片段和样式表完全相同的方式呈现：

<h2> Header <span>Thing</span></h2>   h2 { display: block; }
                                      span { display: block; }
<p> Text </p>

【讨论】：

您只是将整个 W3C 文章复制粘贴到这里？如果您对问题的链接发表评论，那就更好了
对此我很抱歉，我想宁愿去那里阅读，提出问题的人会得到所有的答案以及其他答案。

【解决方案3】：

基本上，:before（如 :after）是一个 CSS 伪元素。所以它几乎就像一个 HTML 内联元素。差不多了。

要使用伪元素，您需要给它一个content 属性（大多数情况下为空字符串）。请注意，默认情况下它是一个内联元素，因此它不能有宽度/高度。您需要设置 display: block（或 inline-block 或其他）。

我认为您错过了在父元素 (.parent) 上设置 relative 位置。就是这样：

.parent{
  position: relative;
  top:500px;  
  width:400px;
  border:1px solid green;
}

【讨论】：

【解决方案4】：

尝试查看这篇文章。它解释了 :before 和 :after 伪选择器的工作原理：

http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

【讨论】：