257

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?

Improve this question
4
  • 20
    Note that this is not a duplicate. The other question asks specifically about <br> 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. Commented May 8, 2016 at 6:52
  • 4
    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. Commented Nov 24, 2016 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. Commented Jan 31, 2019 at 22:45
  • 3
    @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. Commented Mar 15, 2019 at 12:34

1 Answer 1

Reset to default
326

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

@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.
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.
Another possibility is to use the emerging standard web components instead of css. Then you could do something like that. w3.org/TR/components-intro/#defining-a-custom-element
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.. Hopefully this helps someone some day.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.