Use CSS to insert HTML before the content of a selector

Question

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.

You can't add HTML using pseudo-elements...so that won't work. — Paulie_D, Oct 23 '13 at 15:39
generated content doesn't build new HTML elements, but you could style it to make it look identical to an `h3` element. — zzzzBov, Oct 23 '13 at 15:40

score 1 · Answer 1 · answered Oct 23 '13 at 15:43

1

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

answered Oct 23 '13 at 15:43

andi

6,442
1
18
43

I think that is the way I need to go, although I like to stick with HTML/CSS where ever I can, as I feel it's easier to edit in the future. Thanks. – David Gard Oct 23 '13 at 15:52
Plus, ideally no error would occur and the need for inserting the `
` tag wouldn't exist, so it seems unnecessary to have to check every reply to see if it is an error. You still get a +1 though!
– David Gard Oct 23 '13 at 15:55
Check every reply? You are already doing that to some extent... I assume you're only adding `
` if an error occurs. Do it there.
– andi Oct 23 '13 at 15:59

gaborsch · Accepted Answer · 2013-10-23T15:52:26.033

1

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.

edited Oct 23 '13 at 15:52

answered Oct 23 '13 at 15:47

gaborsch

15,408
6
37
48

Good idea, hadn't thought of it that way. Thanks. – David Gard Oct 23 '13 at 15:51
1

I've gone down this route with success. The only thing that didn't work initially was either `margin-` or `padding-bottom`, but adding `display: block;` fixed that. – David Gard Oct 23 '13 at 16:00
Thanks, @DavidGard, I was thinking on mentioning the `display:block`. Actually this `content` is created like a `span` (meaning `inline`d into the content), but `h3` is a `block` element. That's why you have to override that. – gaborsch Oct 23 '13 at 16:14

score 0 · Answer 3 · edited May 23 '17 at 10:25

0

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

edited May 23 '17 at 10:25

Community

1
1

answered Oct 23 '13 at 15:42

Beniamin Szabo

1,909
4
17
26

score 0 · Answer 4 · answered Oct 23 '13 at 15:43

0

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

answered Oct 23 '13 at 15:43

Paulie_D

107,962
13
142
161

Unfortunately I cannot change how the AJAX generate content is returned. Thanks. – David Gard Oct 23 '13 at 15:50

Use CSS to insert HTML before the content of a selector

` with `

` and the consequences...

4 Answers4

` tag wouldn't exist, so it seems unnecessary to have to check every reply to see if it is an error. You still get a +1 though!