Attaching an SVG under a specific part of the headline

Design help General
1

Hey, I want to use some scribble images as a highlight for my headline. I thought it should be possible to create a text span and fill that class with an Image and adjust the position with the controls. In my head the responsiveness should be amazing there!

Problem is that the overflow kills my image and its cut and I can’t figure out a way how to show it.

Thats my design I would like to achive:

image
image1106×270 7.96 KB

This is how the webflow file looks:

image
image696×188 9.83 KB

If anybody know a good solution here it would be highly welcome.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

hi @EpocaVision and welcome. You can place SVG’s with use of ::before and/or ::after pseudo elements. Here is one simple example I have done while ago so you can get an idea how to. But feel free to search on internet for other examples.

3

I found already a solution i was stupid!

Still thank you for helping.

4

no problem Im glad you have figure it out on your own

5

Does anyone have a link to this solution? I have the same problem and can’t find other threads or answer -.-

Thanks!

6

HI @Dylan_Hrurukvit what part isn’t for you clear with using :before and/or :after?

7

Hey, the solution to this without code:

• Add a background image of the custom underline to the text span.
• Create a custom class for it.
• Make sure to convert the display to ‘inline-block’ This will allow you to increate the height of the text span allowing all the underline to be visible.

See below:

Screenshot 2024-11-13 at 12.18.40
Screenshot 2024-11-13 at 12.18.401727×1215 228 KB

https://preview.webflow.com/preview/wfm4-certification-project?utm_medium=preview_link&utm_source=designer&utm_content=wfm4-certification-project&preview=9041d53bb40bb6e450879be4b2053f72&workflow=preview