如何使用CSS在运行时在HTML元素之前插入一些内容

Question

假设HTML定义为

<div>
  <div class="runtime"> Some Important Text.Insert "Important" Before This </div>
  <div class="normal"> General Text </div>

</div>

所以一般来说输出

  

一些重要的文字。在此之前插入“重要”

     

一般文字

但渲染后它应该显示给我们

  

重要的生成内容

     

一些重要的文字。在此之前插入“重要”

     

一般文字

我正在寻找唯一的css解决方案。

Answer 1

您正在寻找此

.runtime:before{
    content: "Important Generated Content";
    font-weight: bold;
    display: block;
}

是的，您可以根据建议的其他答案添加一些margin-bottom。 如果我直接更改我的代码，我会觉得犯了剽窃行为。请在此处注释。

你可能猜到，之前有，之后有吗？ 答案是肯定的！

您可以执行

之类的操作

.importantStuff:after{
    content: "!!!!!";
}

这会在!类

的末尾添加importantStuff个

最后一件事，每个元素只能有一个 before和一个 after，所以明智地使用它们。并享受使用CSS。

Answer 2

.runtime:before {
    content: "Important Generated Content";
    font-weight: bold;
    display: block;
    margin-bottom: 15px;
}

请参阅此jsFiddle。

Answer 3

您可以将伪类:before与content属性一起使用。

.runtime:before { 
    content:"Important!";
    font-weight: bold;
}

您可以在此处查看浏览器支持：http://caniuse.com/#feat=css-gencontent

您可能需要查看this guide，了解更多信息并更好地了解此属性！它解释了特殊字符的使用等。您应该意识到它们无法转换或动画化。

Answer 4

使用伪类

.wrap:before{
    content:"Important Generated Content";
    font-weight:bold
}

<强> DEMO

Answer 5

你也可以使用jquery ......

$('.runtime').before('<p>Test</p>');

Answer 6

CSS无法更改页面上的内容，您需要JavaScript。但是，您可以使用:before伪元素在元素之前创建'fake'元素，并使用content CSS规则向其添加内容。

.runtime:before{
    content: "Important Generated Content";
    font-weight: bold;
}

Some people有问题，因为CSS从来没有打算将内容插入到页面中，只是“设计”它。在CSS中通过JavaScript执行此操作肯定更方便它带来了一个主要的挫折，使用辅助技术的用户可能会有问题作为此blog post中的轮廓以及伪内容中生成的内容元素将无法读取。

另一种方法是使用JavaScript生成标签。此示例在所有带有类<p>的标记上创建.important元素。

See on jsFiddle

<强> HTML

<div class="important">I'm very important</div>
<div>I'm not</div>
<div class="important">I'm very important</div>

<强>的jQuery

$(document).ready(function () {
    $('.important').before('<div class="important-notice">Important!</div>');
});