Just wondering if it's possible somehow to make the CSS content
property insert html code instead string on :before
or :after
an element like:
.header:before{
content: '<a href="#top">Back</a>';
}
this would be quite handy...It could be done through Javascript but using css for this would really make lives easier :)
In CSS3 paged media this is possible using
position: running()
andcontent: element()
.Example from the CSS Generated Content for Paged Media Module draft:
.runner can be any element and
heading
is an arbitrary name for the slot.EDIT: to clarify, there is basically no browser support so this was mostly meant to be for future reference/in addition to the 'practical answers' given already.
As almost noted in comments to @BoltClock's answer, in modern browsers, you can actually add some html markup to pseudo-elements using the (
url()
) in combination with svg's<foreignObject>
element.You can either specify an URL pointing to an actual svg file, or create it with a dataURI version (
data:image/svg+xml; charset=utf8, + encodeURIComponent(yourSvgMarkup)
)But note that it is mostly a hack and that there are a lot of limitations :
document.styleSheets
. for this part,DOMParser
andXMLSerializer
may help.<img>
tags, this won't work in pseudo-elements (at least as of today, I don't know if it is specified anywhere that it shouldn't, so it may be a not-yet implemented feature).Now, a small demo of some html markup in a pseudo element :
Unfortunately, this is not possible. Per the spec:
In other words, for string values this means the value is always treated literally. It is never interpreted as markup, regardless of the document language in use.
As an example, using the given CSS with the following HTML:
... will result in the following output:
<a href="#top">Back</a>Title