Pseudo-element after class

@Arthur Charles, I'm not sure I understood the question re: not exporting in .svg. What is the down side to creating your svg element as a slot, then you could just copy/paste it wherever you want? You wouldn't need to manage extra CSS this way.

@Jeremy No downside really, I was just wondering what most people used and best practices. By default I assume using code is better practice for web standards than importing images.
Do you have examples of how you personally do this in Webstudio?

Sure. Here's the structure I use for a styled divider:
[slot] divider
[box] divider wrapper
[html embed] svg icon

I'd add my styling to the "divider wrapper". You can control the SVG sizing, margins, colors from that element. (provided you have fill="currentColor" & height="100% width="100% on your SVG snippet.

I choose the SVG route for many reasons, eg:

• SVG is "code" and doesn't take an extra http request to load.
• They are typically smaller file size than an image
• They scale natively
• Easily adjust sizing
• Easily adjust fill & stroke colors
• They are accessible (make sure to include a title or aria-label) - CSS pseudo-element isn't by default
• They can be animated.

Thanks a lot Jeremy, this is really helpful!