javascript - css :before 在嵌套 div 中不能完美工作

Question

我对 css:before和:after. 这是我的html：

<div id = "test-box">
    1
</div>

这是我的CSS：

#test-box:before{
    content: "hello";
}

当我运行它时，它可以完美运行并打印：hello 1

但是当我把另一个div放在我现有的里面时div，它就不起作用了。这是新的html：

<div id = "test-box">
    <div>1</div>
</div>

在这种情况下，浏览器会打印：

hello
1

我需要你好留在 1 的左侧。

Answer 1

div 是块元素，所以当你在 div 和嵌套 div之前添加 hello 时，显然会有换行符。

使用嵌套 div 时，必须使用

jsfiddle 演示

#test-box div:before{
content: "hello";
}

更新： jsfiddle 演示

#test-box:before{
content: "hello";
}

#test-box div {
    display: inline;
}

Answer 2

如果您有嵌套的 div，请使用此 CSS：

#test-box div:before{
    content: "hello";
}

那里的选择器选择id 元素中的div ，test-box并在其之前添加文本，而不是在外部 div 之前添加文本。

原因1是换行是因为divs是块元素。您的原始 CSS 在内部<div>标记之前添加了文本，从而在添加的文本之后产生了换行符。

所以，这发生了：

<div id="test-box">
    hello
    <div> <!-- the div starting here causes the following text to be displayed on a new line -->
        1
    </div>
</div>

使用修改后的 CSS，这将是结果，而不是：

<div id="test-box">
    <div>
        hello1
    </div>
</div>

---

如果您必须将其放在外部 div 中，请将其添加到您的 css 中：

#test-box div{
    display: inline-block;
}

（也保留您的问题的另一行）。

这将防止内部div换行到新行。

例子

Answer 3

原因hello是在单独的行1上，因为1它被块级元素（内部 div）包裹。

尝试这个：

#test-box div:before {
  content: "hello";
}

或者，如果您可以控制 HTML，则将内部 div 替换为 span（或其他内联元素）。