Using :before and :after CSS selector to insert HTML

Question

I'm wondering if the following is possible. I know it doesn't work, but maybe I'm not writing it in the correct syntax.

li.first div.se_bizImg:before{
    content: "<h1>6 Businesses Found <span class="headingDetail">(view all)</span></h1>";
}

Any way of doing this?

Note that this is *not* a duplicate. The other question asks specifically about `
` or line break, and the answers give solutions to that special case. It won't help if you want to add header and span tags. — JJJ, May 08 '16 at 06:52
Yes, this should not be marked a duplicate. The other question asks about a specific tag. Also - the answers in this one are much more helpful and easier to find from the search engines. — Vik, Nov 24 '16 at 10:17
Having a question closed as a duplicate is not _ipso facto_ a bad thing. Your question is still highly upvoted and has a good answer, and it helps more people by being able to find answers. They may get the answer here, or the other may help more. Everybody wins. — Tas, Jan 31 '19 at 22:45
@Tas: I agree with you just in that **"Having a question closed as a duplicate is not *ipso facto* a bad thing"**. As far as linking the other question is concerned, just a mention of the so called "duplicate question" in a comment should be sufficient, but not closing this post as duplicate when it's not. — Fr0zenFyr, Mar 15 '19 at 12:34

score 313 · Accepted Answer · edited Jun 23 '19 at 07:48

313

content doesn't support HTML, only text. You should probably use javascript, jQuery or something like that.

Another problem with your code is " inside a " block. You should mix ' and " (class='headingDetail').

If content did support HTML you could end up in an infinite loop where content is added inside content.

edited Jun 23 '19 at 07:48

CommonSenseCode

answered May 03 '11 at 06:42

Erik Martino

121

@Foxinni the more significant reason for not allowing html inside the content parameter is the fact that CSS is designed to work in a single pass-through of the page. If there were html, that would need to be styled, which means the css would need to come back and process itself all over again to style that HTML after it was done styling everything else. This extra functionality would rarely be used by anyone but would still come with a speed cost to everyone. – Jeremy Moritz Jun 17 '14 at 18:20
30

I think the more fundamental reason for not allowing html in content is the huge security risks involved in that. Any site that allows custom CSS would be hugely open to XSS attacks. – Davin Studer Jul 09 '14 at 18:56
3

Another possibility is to use the emerging standard web components instead of css. Then you could do something like that. http://www.w3.org/TR/components-intro/#defining-a-custom-element – Erik Martino Jul 10 '14 at 13:20
2

I eventually found this question/answer because I was looking for a way to have custom list styles and still handle wrapping properly. This was my solution: [a list using a div for the list-style, a div for the content, and flex.](https://codepen.io/yehudamakarov/pen/Mzmjxx). Hopefully this helps someone some day. – Yehuda Makarov Nov 15 '18 at 02:50

1 Answers1