How do you handle ::before and ::after on Webstudio?

The community member needs to have a span with a background that can be animated, and they need to add content to this span. They provide an example from the Sanity.io website where the "content" heading has this effect. The community members discuss various approaches, such as adding an additional span inside the first one, or using pseudo-elements like ::before or ::after. However, they note that Webstudio does not support pseudo-elements, but they can achieve similar effects by adding additional instances and styling them. The discussion also touches on the challenges of implementing pseudo-elements in Webstudio, such as the differences in state cascade and inheritance, and the difficulty of accessing them from JavaScript. While the community members consider adding support for pseudo-elements, they ultimately decide that it's not a priority at the moment and they should focus on other tasks.