Injecting HTML via CSS

Question

I need to basically set the content of something with HTML from CSS. I'm currently doing the following:

.myclass {
    content "<img src=\"hello.png\"/>";
}

However, instead of the image, I see the literal text:

<img src="hello.png"/>

How can I inject arbitrary HTML using CSS?

This might help: http://stackoverflow.com/questions/190396/adding-html-entities-using-css-content — Philip Bevan, Mar 16 '12 at 15:34
@SimonEdström unfortunately not. Output I'm building it for only supports HTML/CSS. — Naftuli Kay, Mar 16 '12 at 15:34
@PhilipBevan, yes I've seen that. Would I just have to encode my HTML somehow? — Naftuli Kay, Mar 16 '12 at 15:35
@TKKocheran - Yes, you would have to encode it as escaped Unicode, just like the answer in that question says. — cdeszaq, Mar 16 '12 at 15:36
CSS is for layout and appearance (i.e. "style"). Not content. — Mark Fraser, Mar 16 '12 at 15:36
This is not a duplicate of the linked question. This question is about inject HTML tags, not HTML entities. — Peter Olson, Mar 16 '12 at 15:37
@TKKocheran- I woud trust the other answers here that say you cannot do it, I would recommend Rob W.'s answer and use background-image. — Philip Bevan, Mar 16 '12 at 15:38

score 15 · Accepted Answer · edited Jun 20 '20 at 09:12

HTML stores the data, and is the Model
CSS stores the styles, and is the View
JS stores the interactions, and is the Controller

If you're trying to add data to the page, it should be done via HTML. If you're simply trying to add an image as a style, use the background-image property. You don't need to inject an <img> element in the page to do that.

Don't ever do this, ever

As far as being able to inject HTML into the page via CSS, it's not directly possible, however it's possible to add JavaScript into the page using CSS, which can then add HTML to the page.

I can't emphasize enough how wrong that approach would be.

Peter Olson · Answer 2 · 2012-03-16T15:51:52.227

7

Unless there is some strange hack that I am not aware of, this cannot be done with pure CSS.

The content property is only able to insert text; if you try to put in HTML, it will be escaped.

That said, you can do something like this with pure CSS:

enter image description here

This is the CSS that can perform that effect:

.myClass:before {
  display: inline-block;
  width: 32px;
  height: 32px;
  content: "";
  background-image: url("img.gif");
}

You can see this in action on this jsFiddle page.

edited Mar 16 '12 at 15:51

answered Mar 16 '12 at 15:35

Peter Olson

139,199
49
202
242

Strange hack will require JavaScript, sadly. – Diodeus - James MacFarlane Mar 16 '12 at 15:37
4

Except Javasript is equipped to do this and doesn't need any strange hacks. – Peter Olson Mar 16 '12 at 15:38

score 4 · Answer 3 · answered Mar 16 '12 at 15:35

4

In this particular case, you can use a pseudo-class (eg ::before), background-image, display:block and a fixed width and height to show the image.

Also, make sure that the colon : is added between content and its value.

A relatively new concept at the horizon is the element() value for backgrounds. This will display HTML as if it were an image: See also -moz-element.

answered Mar 16 '12 at 15:35

Rob W

341,306
83
791
678

Unfortunately, I'm working with print media and so I can't use the `:before` selector on my `@page @top-left` selector, I've tried :( – Naftuli Kay Mar 16 '12 at 16:11
@TKKocheran Another exotic approach: Add a negative left margin to your element, and a positive left padding. Then add the background image on the element *itself*. Make sure that you use `background-repeat:no-repeat` to show the image only once. – Rob W Mar 16 '12 at 16:19
The [evil button example](https://developer.mozilla.org/en-US/docs/Web/CSS/element#A_somewhat_more_bizarre_example) looks dangerous but is actually [harmless](https://www.w3schools.com/code/tryit.asp?filename=G5026YYGWOTV). – Cees Timmerman Jun 21 '19 at 12:05

score 1 · Answer 4 · edited May 23 '17 at 11:54

1

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

edited May 23 '17 at 11:54

Community

1
1

answered Jan 19 '13 at 09:03

Zombo

1
62
391
407

[`-moz-binding`](https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-binding) is deprecated since Gecko 57 (Firefox 57 / Thunderbird 57 / SeaMonkey 2.54) – Cees Timmerman Jun 21 '19 at 11:55

score 0 · Answer 5 · answered Mar 16 '12 at 15:36

You can't. It's not what it's for. The CSS is for the presentation layer while the HTML is the data layer.

Actually, you can, but just for characters, not HTML. You can use the content property. With some CSS selectors like :before, you can do nice stuff like adding your own character as a bullet for your list. But not much more.

Injecting HTML via CSS

5 Answers5

Don't ever do this, ever

Linked