via定制html和css,Injecting HTML via CSS

问题

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

.myclass {

content "";

}

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

How can I inject arbitrary HTML using CSS?

回答1:

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 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.

回答2:

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:

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.

回答3:

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.

回答4:

This can be done. For example with Firefox

css

#hlinks

{

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

}

stackexchange.xml

xmlns:html="http://www.w3.org/1999/xhtml">

privileges

|

log out

ref 1

ref 2

回答5:

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.

来源：https://stackoverflow.com/questions/9740134/injecting-html-via-css