How to use ::after and ::before without an HTML Embed?
How to use ::after and ::before without an HTML Embed?
At a glance
The community members are discussing the inability to find a certain functionality and whether it is possible natively. One community member is working on a tooltip issue where the tooltip is hiding the first icon, preventing interaction. The discussion explores using ::before and ::after pseudo-elements to potentially fix this, but the community members conclude that these are not easily implementable in the visual programming tool. The solution suggested is to use pointer-events: none on the tooltip content to prevent it from interfering with the underlying elements. This solution is confirmed to work well by the community members.
::before and ::after behave just like regular div but do not exist in dom. So they do not fix anything alone. And I'd say they are not necessary at all caz in builder for example you will not be able to select them by clicking on canvas. But you can always add regular div and have full control from webstudio.
The problem is that we do not have constraints for descendent selector. You can add anything there but we do not want to support " " in selectors except for html-embed/markdown-embed.
All right @TrySound ! Thanks a lot. A already used pointer-events:none on the tooltip and on hover I made it pointer-events: auto. But it didn't work... Maybe I have to retry...
@Milan Boisgard | Uncode School, I use pseudo very frequently at work. It was jarring when I couldn't add them in Webstudio at first. I just adjusted my thinking and haven't run into a problem where an absolute positioned element hasn't worked in its place. (something to think about if you run into other use-cases for it - as I see you've got a fix for this one).
The solution with pointer-events works very fine 🙂 I think the solution to add pseudo element like ::after and ::before is maybe not easy to approach with visual programming
