jbabrams2 jbabrams2 - 6 months ago 17
CSS Question

Can I insert <object> element into pseudo class ::before's content?

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!

Answer

.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