1

I built a progress bar that consists of a horizontal list. Each list item has svg's included in the content property of the ::before pseudo class. The effect is the appearance of icons above each list item that represent a certain step in the user's progress.

User's are allowed to edit the color of all content on the site. The svgs' color cannot be edited when it is simply linked via the content url. However, I was wondering if i could instead insert the svg into an <object> tag and then include the <object> in the content property.

I have a feeling this can't be done but was hoping somebody else had some insight!

Thanks!

user2864740
  • 54,112
  • 10
  • 112
  • 187
jbabrams2
  • 25
  • 1
  • 6
  • 1
    No, it is not possible to put HTML code in the content property, only text or an image. –  May 31 '16 at 19:09
  • You can actually add an element in a pseudo-element,but this won't be part of the DOM, so you won't be able to access its methods through the DOM and it won't even be able to fetch external resources. But one important thing in your case is that you can actually load svg images directly in pseudo-elements using a `` (`url(pathTo.svg)`) and even some uri-encoded version of it (see [here](http://stackoverflow.com/a/37558030/3702797) for more info). – Kaiido Jun 01 '16 at 01:29

1 Answers1

1

.test::after {
  content: "Pseudo-elements <b>cannot contain additional DOM nodes</b>."
}
<div class="test">Nope. </div>

Only text, URIs, or a handful of misc convenience values are allowed in the "content" property: https://developer.mozilla.org/en-US/docs/Web/CSS/content

Daniel Beck
  • 16,972
  • 5
  • 29
  • 49
  • That's not true: http://stackoverflow.com/questions/4505093/css-content-property-is-it-possible-to-insert-html-instead-of-text/37558030#37558030 – Kaiido Jun 01 '16 at 01:25
  • OK. I hereby amend my answer to "except for one bizarre and almost certainly accidental edge case, only text is allowed in the content property." – Daniel Beck Jun 01 '16 at 03:24
  • No, it's not "*bizarre*" nor "*accidental*". You can use `` to display images in pseudo-elements' `content` CSS property, and this implies that you can show svg images as well. Showing HTML is a hack derived from this, but showing images and svg is perfectly specified. Check [your link](https://developer.mozilla.org/en-US/docs/Web/CSS/content#Values) yourself, there are way more accepted values than ``. – Kaiido Jun 01 '16 at 04:01
  • Fair enough, I stand corrected. – Daniel Beck Jun 01 '16 at 10:16