33

I wrote some dummy css. Instead of a tag I got escaped characters. How can I add a div tag instead?

.HeaderName:after{
content: "<div class=\"Name2\">text</div>";
}

.Name2 {
color: red;
}
peterh
  • 11,875
  • 18
  • 85
  • 108

3 Answers3

44

The content declaration cannot add tags to the page (tags are structural); additionally, CSS is meant for presentation changes, not structural content changes.

Consider using jQuery, instead, such as:

$(".HeaderName").after("your html here");
Dave Jarvis
  • 30,436
  • 41
  • 178
  • 315
Matteo Mosca
  • 7,380
  • 4
  • 44
  • 80
  • 2
    Lastly, text added via the CSS content property is not inserted into the DOM, so it can't be acted on later by Javascript, etc. I agree that it should not be used in general, and certainly should not be used for this purpose. +1 – Jacob Mattison Jun 23 '10 at 14:05
  • 6
    In certain contexts, the use of the content property could be stylistically correct. For instance, adding a comma after certain pieces of content: New YorkNY .city:after { content: ", "; } So, it's not _always_ wrong, but it's not by any means recommended. – Ryan Kinal Jun 23 '10 at 15:56
  • 7
    One useful example is putting colon (:) after labels or asterisk (*) after required fields. It can be agreed that these are just presentation details and a screen read should not read 'colon' or 'star' as part of the content. – andho Mar 18 '13 at 10:50
  • 1
    There are more useful examples. Especially considering icon fonts! – ProblemsOfSumit Mar 27 '14 at 17:47
13

If you need that extra tag only to make the added text red, just do this:

.HeaderName:after{
    content: "text";
    color:red;
}

Tested on Chrome.

Omiod
  • 11,285
  • 11
  • 53
  • 59
11

You can't insert tags using content: in CSS. Here is the relevant part of the spec; see the 'content' property in the CSS 2.1 spec.

Dominic Cooney
  • 6,317
  • 1
  • 26
  • 38