55

Is there any way to insert an HTML element, dom or code from CSS(3)?

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
methyl
  • 3,272
  • 2
  • 25
  • 34

5 Answers5

38

No. The only you can do is to add content (and not an element) using :before or :after pseudo-element.

More information: http://www.w3.org/TR/CSS2/generate.html#before-after-content

Sotiris
  • 38,986
  • 11
  • 53
  • 85
15

Content (for text and not html):

http://www.quirksmode.org/css/content.html

But just to be clear, it is bad practice. Its support throughout browsers is shaky, and it's generally not a good idea. But in cases where you really have to use it, there it is.

byxor
  • 5,930
  • 4
  • 27
  • 44
fiiv
  • 1,267
  • 1
  • 8
  • 16
  • why is that? I use :after to make elements height dynamic. – yoda Feb 02 '11 at 20:57
  • Why its bad? For example i have nice, backgrounded h2 and I must to do like: `code`(

    Dodaj ofertę

    )     – methyl Feb 02 '11 at 20:58
  • 3
    Generally, you'd want to use Javascript to achieve this kind of thing. Using `getElementById` with `.innerHTML` and `.value` makes it really easy. – fiiv Feb 02 '11 at 20:59
  • `

    Dodaj ofertę

    `     – methyl Feb 02 '11 at 21:04
  • 2
    I don't understand why it's bad practice. Can you elaborate? Is it just a browser support issue? As I understand it, all modern browsers support the property. – Richard JP Le Guen Feb 02 '11 at 21:04
  • 2
    @LwguRi well firstly, yes, browser support. IE before IE8 does not support this property, and Opera 9 supports it in a different way from Firefox and Chrome. Secondly, as I mentioned earlier, this is the kind of thing Javascript is intended to do. It's like using a `` tag. You technically CAN and it will work in Transitional, but you don't use it because that's what CSS is for. You can eat soup with a fork too, but that doesn't mean it's a great idea. – fiiv Feb 02 '11 at 21:11
  • 10
    @MT - I disagree; if I need a colon (`:`) between a ` – Richard JP Le Guen Feb 03 '11 at 02:15
  • This is not a correct answer. The correct one is below. You cannot add html with css. – Laszlo Varga Mar 28 '14 at 09:35
  • I have a good use case for this. I am using JavaScript to search the content of elements on the page (hiding unmatched items). So that the search does not return titles that occur on every element, I've put the titles in the css:before. If the term appears in the text of the element it is still returned. – Steve Black Feb 11 '16 at 02:04
14

No you cannot. The only thing you can do is to insert content. Like so:

p:after {
    content: "yo";
}
alexn
  • 57,867
  • 14
  • 111
  • 145
3

An alternative - which may work for you depending on what you're trying to do - is to have the HTML in place and then use the CSS to show or hide it depending on the class of a parent element.

OR

Use jQuery append()

Stu
  • 69
  • 3
2

This can be done. For example with Firefox

CSS

#hlinks {
  -moz-binding: url(stackexchange.xml#hlinks);
}

stackexchange.xml

<bindings xmlns="http://www.mozilla.org/xbl"
  xmlns:html="http://www.w3.org/1999/xhtml">
  <binding id="hlinks">
    <content>
      <children/>
      <html:a href="/privileges">privileges</html:a>
      <html:span class="lsep"> | </html:span>
      <html:a href="/users/logout">log out</html:a>
    </content>
  </binding>
</bindings>

ref 1

ref 2

Zombo
  • 1
  • 62
  • 391
  • 407