html - 使用 CSS 在选择器的内容之前插入 HTML

Question

我有以下格式通过 AJAX 返回的输出(#the-poll-options 是 AJAX 插入到的容器)。

<div id="the-poll-options">
    <div class="error-output">
        <p>Blah, blah, bla, etc, etc.</p>
    </div>
</div>

我需要插入一个标题来指示错误 -

<div id="the-poll-options">
    <div class="error-output">
        <h3>An error has occurred</h3>
        <p>Blah, blah, bla, etc, etc.</p>
    </div>
</div>

为此，我使用了以下 CSS。这在一定程度上有效，但实际上输出 <h3>An error has occurred</h3> ，而不是将其解释为 HTML。

#the-poll-options .error-output:before{
    content: '<h3>An error has occured</h3>';
}

是否可以使用纯 CSS 而不需要使用 JS 来做到这一点？请注意，我无法更改 AJAX 调用返回的 HTML。谢谢。

Answer 1

你不能在那里创建一个 h3 但你可以像 h3 一样格式化它。不过，您必须重复所有格式设置规则。

#the-poll-options .error-output:before{
    content: 'An error has occured';
    font-weight: bold;
    font-size: 14px;
    color: red;
    ...
}

此 :before 类中的样式定义将应用于添加的内容。