-2

I want make an underline animation on a link

this is my html


<header>
        <div class="title">
            <p>feldman</p>
        </div>
        <nav>
          <a href="intro.html">Intro</a>
          <a href="about.html">About</a>
          <a href="fieldman.html">Services</a>
          <a href="project.html">Project</a>
          <a href="contact.html">Contact</a>
           
        </nav>
        
           </header>

my css:

a::after{
    content: "";
    position: absolute;
    width: 0%;
    height: 1px;
    display: block;
    background-color: black;
    transition: width 0.2s ease-in-out;
}

a:hover:after{
 width: 100%;   
}

the problem is when I put the cursor on the link all the link is underlined

the picture of my result

I want a solution to fix the problem the underline should be only on one link

ok now my css:

 nav a{
        color: black;
        text-decoration: none;
        margin: 6px;
        width: calc(100%/5);
        padding: 3px  4px  3px  5px ;
        line-height:1;
        position: relative;
        display: inline-block;
        }
        
        nav{
            margin-top: 9px;
            margin-right: 18px;
           
            width: 40%;
            height: 75%;
           display: flex;
           justify-content: center;
           margin: auto 10px;
        }

        header{
            display: flex;
            justify-content: flex-end;
          }
pat66
  • 1
  • 1

2 Answers2

0

Obviously there are some other styles in play that aren't included in your code snippet, but at the minimum you'll need to add a position: relative to the anchor tags so that the ::after pseudo-element applies the absolute position relative to the <a> rather than whatever the nearest positioned ancestor is.

You'll also need to specify display: inline-block on the anchors so that they behave correctly with the injected content.

a {
  position: relative;
  display: inline-block;
}

JSFiddle here

Output:

Underlined link

Update to reflect edited question

Since you have padding in the <a> styles you can either mess around with the offsets in your ::after styling (probably not a great idea, then any change needs to be made in two places), or just introduce a wrapper element around the text, e.g.

  <a href="intro.html"><span class="label">Intro</span></a>
  <a href="about.html"><span class="label">About</span></a>
  <!-- etc -->

Then apply the display / position styles to the .label element, and update your pseudoelement to hang off the .label instead of the anchor.

JSFiddle here

motto
  • 2,888
  • 2
  • 2
  • 14
  • Thanks for your answer now is better but the underline is not only on the word – pat66 Feb 25 '23 at 21:21
  • @pat66 It's difficult to know precisely what problem you're having given that you have only shared a small portion of your styles. – motto Feb 25 '23 at 21:22
  • i want add a screenshot but i dont know how to add on my comment – pat66 Feb 25 '23 at 21:26
  • @pat66 updated to reflect your stylings – motto Feb 25 '23 at 21:46
  • with the .label is worst than before – pat66 Feb 26 '23 at 06:49
  • @pat66 Terms like "worse than before" do not help anyone to help you. Since you're only sharing part of your CSS and markup then you'll have to adapt the answers back to your code. The [JSFiddle](https://jsfiddle.net/7veycqt9/1/) that I linked before draws the progressive underline "only on the word" on mouseover, the rest is up to you. – motto Feb 26 '23 at 10:14
0

you can try putting the links in a ul tag and then modifying the css with ul { display: flex; flex-wrap: wrap; justify-content: left;} and change the width %.

WalterLie
  • 1
  • 1
  • 2