Making talk bubble with directional arrow

Hi everyone,

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:

  1. create an arrow image in Figma (svg file)
  2. add it to a div (class: “bubble”) containing a div with text (class: “bubble-text”)
  3. set the parent div (“bubble”) to relative positioning
  4. use absolute positioning and z-index to place the arrow image relative to the text div (“bubble-text”).

Thanks in advance for any feedback!

Here is my site:

@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.

Here are a few examples:

1 Like

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.

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.

it looks great! Thank you very much.
Can you explain how to import the scss template into webflow?

@Roy_Nativ in CodePen you can just click the little button in the upper right of the CSS code editor and select “View compiled CSS”

Then just copy and paste that into a custom code section in Webflow.