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

既然你正在使用JS进行Ajax调用，为什么不在Ajax成功函数中创建h3？

Answer 2

您无法在那里创建h3，但可以格式化，就像h3一样。但是，您必须重复所有格式规则。

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

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

Answer 3

你做不到。使用content，您只能添加文字。以下是您可能会发现有用的类似问题： LINK

Answer 4

如上所述，您无法使用伪元素添加HTML

你可以试试这个

<强> HTML

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

＆GT;

<强> CSS

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

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

4 个答案: