Javascript css:before在嵌套div中无法完美工作

我对css

：before

和

：after

有问题。这是我的html：

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

当我运行这个程序时，它工作正常并打印：

hello 1

但是当我在现有的

div

中放入另一个

div

时，它就不起作用了。这是新的html：

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

---

我需要hello停留在1的左侧。

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

#测试箱分区：之前{
内容：“你好”；
}

那里的选择器选择id为

的元素测试框中的
div
，并在其前面添加文本，而不是在外部div之前添加文本

1
位于新行的原因是
div
是块元素。原始CSS将文本添加到内部
标记之前，从而在添加的文本之后产生一个换行符

所以，事情发生了：

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

（同样，在你的问题中保留另一行）

这将防止内部
div
换行

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

#测试箱分区：之前{
内容：“你好”；
}

那里的选择器选择id为
的元素测试框中的
div
，并在其前面添加文本，而不是在外部div之前添加文本

1
位于新行的原因是
div
是块元素。原始CSS将文本添加到内部
标记之前，从而在添加的文本之后产生一个换行符

所以，事情发生了：

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

（同样，在你的问题中保留另一行）

这将防止内部
div
换行

之所以
hello
与
1
在单独一行，是因为
1
用块级元素（内部div）包装

试试这个：

#测试箱分区：之前{
内容：“你好”；
}

如果您可以控制HTML，也可以用span（或其他内联元素）替换内部div。
原因是
hello
与
1
在一行中，因为
1
用块级元素（内部div）包装

试试这个：

#测试箱分区：之前{
内容：“你好”；
}

如果您可以控制HTML，也可以用span（或其他内联元素）替换内部div。
div是块元素，因此当您在div和嵌套div之前添加hello时，显然会出现换行

使用嵌套div时，必须使用


更新：

#测试盒：之前{
内容：“你好”；
}
#测试箱分区{
显示：内联；
}
div是块元素，因此在div和嵌套div之前添加hello时，显然会出现换行

使用嵌套div时，必须使用


更新：

#测试盒：之前{
内容：“你好”；
}
#测试箱分区{
显示：内联；
}
我建议使用。不，我必须在主div（测试盒）而不是嵌套div之前加上“hello”。此代码将hello放在内部div之前。我建议使用。不，我必须在主div（测试盒）而不是嵌套div之前加上“hello”。此代码将hello放在内部div之前，我建议使用。不，我必须在主div之前加上“hello”（测试框）非嵌套div。此代码将hello置于内部div之前。我建议使用。否我必须将“hello”置于主div（测试框）非嵌套div之前。此代码将hello置于内部div之前否我必须将“hello”置于主div（测试框）之前非内部div。此代码将hello置于内部div之前div@FarhadShirzad：好的，在页面底部添加了第二个选项。谢谢，这可以工作，但是我的内部div因为display:internal block而丢失了他的样式；@FarhadShirzad:上面还有什么样式？如果你不能使用
内联块
，并且不能将文本放在内部
div的内容
，剩下的选项不多。不，我必须在主div（测试框）前面加上“hello”非内部div。此代码将hello置于内部div之前div@FarhadShirzad：好的，在页面底部添加了第二个选项。谢谢，这可以工作，但是我的内部div因为display:internal block而丢失了他的样式；@FarhadShirzad:上面还有什么样式？如果你不能使用
内联块
，并且不能将文本放在内部
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>

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

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