Streaming live at 10am (PST)

Custom line below the text

I was practicing on webflow and ran into a problem

I have created a custom bottom line with Div Block and gave it a mouse hover animation but when I want to hover it in the preview, that doesn’t work correctly, the line must be below the text but is not

( Text has z-index )

https://preview.webflow.com/preview/interaction-f9319c?utm_medium=preview_link&utm_source=designer&utm_content=interaction-f9319c&preview=1cc419fd225bdec381ec0b7b0f7238d4&workflow=preview

Screen Shot 2022-01-03 at 12.45.18 PM

OR >>

Screen Shot 2022-01-03 at 1.03.45 PM

hi @SinaNouri another way can be adding margin-bottom let say 24px on your Heading 1

Take a look at this Sandbox Example. Is this what you were trying to achieve?
If so, just use relative positioning with the div you are using for the underline. See the sandbox example.

Thank you @JimF, but I think I misinterpreted my problem, please review it again :sweat_smile:

Thank you @whitakereditions, but I think I misinterpreted my problem, please review it again :sweat_smile:

Thanks, @Stan, but I think I misinterpreted my problem, please review it again

Hi @SinaNouri you actually mean behind text?
On my site all works as expected.

EDIT: I have now tested page in different browsers and I have found that only Chrome doesn’t render element the way it should. It will jump behind text only on 100% out.

1 Like

hi @SinaNouri I have found where your problem is. All you need to do is to remove class color on your color-box | color combo. When you will remove this redundant class (set your color on box it self) then you need to change target to color-box in your animation.

Hope that will help you to solve your request.

hi @Stan, it doesn’t work, I tested it before, as you said, it only has this problem in Chrome.
But again, thank you for your time to solve it :pray:

EDIT: I updated Chrome and it works now :expressionless:

hi @SinaNouri when I was looking on your project in browser (live page) to find what is going on I have found that color is different (purple) compare to blue (designer preview). Reason for this is that you have custom CSS in your project setting and that is your major issue.

If you do not have further question and issue doesn’t persist feel free to close your request as solved

2 Likes

@Stan How can I close it? :sweat_smile:

when you hover over icons in response it will reveal green “button” solution just tap it.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.