How to create underline that follow text length? – Layout & Design – Forum

by





1

Hello everyone, I am new to webflow and I am trying to create my website in a creative and dynamic way. Polishing the last details I have realized that when translating the language page, the underline effect I have created does not respect the length of the text and in some cases the line is longer or shorter. I would like to know how I can make the text box fit the text itself and not the container in which it is added.

This is my web page where you can analyze the animation.

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




2

hi @Portela you will need custom code as WF doesn’t offer in UI pseudo-elements (I’m not aware of it) The code is very simple. here is example to see how it works just change text. Feel free to study what code does and customise it to your taste.




3

Hi Stan!
Thank you for your quick response. I was testing and I realized that the problem is not the text but the box that contains it. The text can shrink but the link box that contains it doesn’t adapt. What do you think is the problem?. Or how else could I create this effect.

Thanks!




4

hi @Portela you are welcome. Check provided code you can test. I have disabled wrapper code not to confuse you. Try disable width: fit-content; to see difference.

Anyway, the best way to get help is to follow the forum post guide that is pinned on top of each section, if you have missed it here they are.

  • Required: Share your project’s Read-Only link and live site’s Published link
  • The read-only link is a special URL generated in the Dashboard to allow others to view your project in the Webflow Designer. How to get your project’s read-only link?
  • The published link is the webflow.io subdomain where you can view the live site with custom code running. It is IMPORTANT to share this link, as custom code does not run in the Designer.
  • Describe issue in detail including what page, section and/or element is localized
  • Upload as many screenshots as possible or provide screencast videos to help others help you faster
  • Add a description and/or post a link to a working example of what you’re trying to achieve
  • Reply to users by tagging using the @ sign followed by their forum username like this: @formMemberName



Source link

Leave a Comment