CODEWITHSUNDEEP
htmlcss
David Gard
David Gard

Reputation: 12047

Use CSS to insert HTML before the content of a selector

I have output that is returned via AJAX in the following format (with #the-poll-options being the container that the AJAX is inserted in to).

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

I need to insert a heading to indicate an error -

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

To do this, I've used the following CSS. This works to a point, but actually outputs <h3>An error has occurred</h3>, rather than interpreting it as HTML.

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

Is it possible to do this with pure CSS, without the need to use JS? Note that I cannot alter the HTML that is returned by the AJAX call. Thanks.

Upvotes: 3

Views: 580

Answers (4)

gaborsch
gaborsch

Reputation: 15758

You can't create a h3 there but you can format it like it was h3. You have to repeat all formatting rules, though.

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

The style definition within this :before class will apply to the added content.

Upvotes: 1

andi
andi

Reputation: 6522

Since you're using JS to do the Ajax call anyway, why not create that h3 inside the Ajax success function?

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115098

As mentioned, you can't add HTML using pseudo-elements

You could try this though

HTML

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

>

CSS

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

Upvotes: 0

Beniamin Szabo
Beniamin Szabo

Reputation: 1929

You can't. With content you can only add text. Here is a similar question that you might find helpful: LINK

Upvotes: 0

Related Questions