Using :before and :after CSS selector to insert Html

html css css-selectors
Vik picture Vik · May 3, 2011 · Viewed 218.8k times · Source

I'm wondering if the following is possible. I know it doesnt 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>";
}

Anyway of doing this?

Answer

Erik Martino picture Erik Martino · May 3, 2011

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.

Related questions

Can I write a CSS selector selecting elements NOT having a certain class or attribute?

I would like to write a CSS selector rule that selects all elements that don't have a certain class. For example, given the following HTML: <html class="printable"> <body class="printable"> <h1 class="printable">…

Read More
CSS selector for text input fields?

How can I target input fields of type 'text' using CSS selectors?

Read More
How can I style even and odd elements?

Is it possible to use CSS pseudo-classes to select even and odd instances of list items? I'd expect the following to produce a list of alternating colors, but instead I get a list of blue items: <html> <…

Read More