Getting a text accent to wrap with my text?

Design help Layout & Design
1

So I have a “text accent” that I’m using to highlight some headings. It grows dynamically with the word because the size of its width is set to 100%, but it does not wrap with the text. Instead it only gets wider. I want it to break out into two lines like the text does. You can see the section I’m talking about if you scroll down to the title “Featured Work” and look at the headings for the two cards underneath that section. Ideas?

Here is my site Read-Only: Webflow - Michelle Western's Portfolio

2

hi @Michelle_Western that is a correct behaviour because of position absolute and aligning to bottom. This will not even work with use of pseudo classes like ::before to ::after. Just think about that.

I have recently posted response for identical issue so feel free to look into if one of these solutions solve your request.

EDIT: another way can be use box-shadow: inset ...

3

The box-shadow: inset code you included is what I want to happen for my text highlighting. How do I make that happen in Webflow? Do you have steps to do it there from the style panel rather than the code? (I’m not sure how to insert the code in Webflow).

4

hi @Michelle_Western here is video with 3 options how to use any custom code (in this case CSS)

  1. Use <embed> element. You will have immediate visual feedback. The code works only for this page.

  2. Use code in Page setting. Custom code will work only for this page and you will be able to see result ONLY on PUBLISHED site.

  3. use project setting. The custom code class highlight will work on any page of project.

All is in WF documentation