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

Question

假设 HTML 定义为

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

</div>

所以通常输出会是

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

一般文本

但渲染后它应该向我们展示

重要生成内容

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

一般文本

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

score 4 · Accepted Answer

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

请看这个jsFiddle。

score 4 · Accepted Answer

你正在寻找这个

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

是的，您可以margin-bottom按照其他答案的建议添加一些。如果我直接更改我的代码，我会觉得抄袭。只是在这里注释。

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

你可以做类似的事情

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

这在课程!结束时添加了 simportantStuff

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

score 3 · Accepted Answer

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

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

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

您可能想查看本指南，以获取更多信息并更好地了解此属性！它解释了特殊字符的使用等。您应该注意它们不能被转换或动画。

score 2 · Accepted Answer

使用伪类

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

score 0 · Accepted Answer

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

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

有些人对此有疑问，因为 CSS 从来没有打算将内容插入页面，只是“样式”它。在 CSS 中执行此操作肯定比 JavaScript 更方便，它带来了一个重大挫折，使用辅助技术的用户可能会遇到此博客文章中的概述问题，并且不会读取伪元素中生成的内容。

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

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

score 0 · Accepted Answer

0

你也可以使用jquery...

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

于 2013-03-05T10:07:44.143 回答

6 回答 6