This is my first forum post. I’m excited to have my first technical question!
I am designing - let’s call it, for simplicity’s sake - an online comic book. I need to add the speech bubbles, which should appear to come from the speaker. I have seen posts online about creating arrows using pseudo-classes (e.g., :before, :after). However, I don’t believe that pseudo-classes are supported on Webflow.
First question, can this “arrow” be created using Webflow styling alone?
Second, a request for feedback on a possible solution:
create an arrow image in Figma (svg file)
add it to a div (class: “bubble”) containing a div with text (class: “bubble-text”)
set the parent div (“bubble”) to relative positioning
use absolute positioning and z-index to place the arrow image relative to the text div (“bubble-text”).
@Drew_Long - you can do it without using psuedo-classes (which you can’t access in Webflow without custom css) or your second solution should work as well, just positioning an image or css shape within a parent. It depends on how you want it to look, if hand-drawn is a requirement, you may want to make a vector in Figma/Illustrator and use that, but you can also make the shape using css alone, which can be more flexible / lighter weight.
Thanks a lot, Sam. These are great learning opportunities, for this and future projects. I will try the second example you shared, and my own idea using the vector.
Best,
Drew
Actually, both of these first two examples you provided use before or after selectors, which is - I believe - “custom CSS” in Webflow world. Will try that now.
@Drew_Long - yea, ideally you can simplify things by using the pseudo-elements, but you can easily do the same thing just using another element like a nested div.
