CSS content property is it possible to insert HTML instead of Text

Question

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    lt a href   top  gt Back lt  a gt        this would be quite handy   It could be done through Javascript but using css for this would really make lives easier

User · Answer

In CSS3 paged media this is possible using position: running() and content: element().

Example from the CSS Generated Content for Paged Media Module draft:

@top-center {
  content: element(heading); 
}

.runner { 
  position: running(heading);
}

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

User · Answer

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  lt foreignObject gt  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      You can not load any external resources from this markup  no CSS  no images  no media etc    You can not execute script  Since this won t be part of the DOM  the only way to alter it  is to pass the markup as a dataURI  and edit this dataURI in document styleSheets  for this part  DOMParser and XMLSerializer may help  While the same operation allows us to load url-encoded media in  lt img gt  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      x000D   x000D      x000D      original svg code   x000D    x000D    lt svg width  200  height  60  x000D        xmlns  http   www w3 org 2000 svg  gt  x000D    x000D     lt foreignObject width  100   height  100   x  0  y  0  gt  x000D     lt div xmlns  http   www w3 org 1999 xhtml  style  color  blue  gt  x000D     I am  lt pre gt HTML lt  pre gt  x000D     lt  div gt  x000D     lt  foreignObject gt  x000D    lt  svg gt  x000D    x000D     x000D   log  after   x000D    content  url  data image svg xml  20charset utf8  20 3Csvg 20xmlns 3D 22http 3A 2F 2Fwww w3 org 2F2000 2Fsvg 22 20height 3D 2260 22 20width 3D 22200 22 3E 0A 0A 20 20 3CforeignObject 20y 3D 220 22 20x 3D 220 22 20height 3D 22100 25 22 20width 3D 22100 25 22 3E 0A 09 3Cdiv 20style 3D 22color 3A 20blue 22 20xmlns 3D 22http 3A 2F 2Fwww w3 org 2F1999 2Fxhtml 22 3E 0A 09 09I 20am 20 3Cpre 3EHTML 3C 2Fpre 3E 0A 09 3C 2Fdiv 3E 0A 20 20 3C 2FforeignObject 3E 0A 3C 2Fsvg 3E    x000D    x000D   lt p id  log  gt hi lt  p gt  x000D   x000D   x000D

User · Answer

It is not possible prolly cuz it would be so easy to XSS  Also   current HTML sanitizers that are available don t disallow content property   Definitely not the greatest answer here but I just wanted to share an insight other than the  quot according to spec     quot

User · Answer

Unfortunately  this is not possible  Per the spec      Generated content does not alter the document tree  In particular  it is not fed back to the document language processor  e g   for reparsing     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    lt h1 class  header  gt Title lt  h1 gt        will result in the following output    lt a href  quot  top quot  gt Back lt  a gt Title

[html] CSS content property: is it possible to insert HTML instead of Text?

Examples related to html

Examples related to css

Examples related to pseudo-element

Examples related to css-content