CODEWITHSUNDEEP
htmlcss
Siggy
Siggy

Reputation: 39

Applying 'transition' effect to <a> elements not working properly

Below is some HTML code that I have for a website I'm working on:

.container {
    display: flex;
    flex-direction: row;
    position: relative;
    top: 10%;
    width: 25vw;
    min-width: 428px;
    height: auto;
    padding: 15px;

    justify-content: left;
    align-items: center;
    
    background-color: white;
}

.container a {
  color: black;
  margin-left: 10px;
  text-decoration: none;
  transition: all ease-in-out 0.25s;
}

.container a h2:hover {
  text-decoration: underline;
}

.container a img {
    width: 100px;
    height: auto;
}

.container + .container {
  margin-top: 20px;
}
<body>
  <div class="main">
      <h1>Contact</h1>
      <p>In need of a commission? Do you just want to talk? Let me know by shooting me an email or DMing me on Instagram.</p>
      <div class="container">
        <a href="https://www.instagram.com/bellapfisterphotography" target="_blank"><img src="./insta.png"></a>
        <a href="https://www.instagram.com/bellapfisterphotography" target="_blank"><h2>@bellapfisterphotography</h2></a>
      </div>
      <div class="container">
        <a href="mailto:[email protected]"><img src="./email.png"></a>
        <a href="mailto:[email protected]"><h2>[email protected]</h2></a>
      </div>
  </div>

For some reason, the underline transition I'm applying to the containers elements is not functioning as intended. Any help on fixing this or explaining why this happens would be greatly appreciated.

Upvotes: 1

Views: 110

Answers (3)

Frank Fajardo
Frank Fajardo

Reputation: 7359

That's because you are applying text-decoration on two different elements:

.container a {
  ...
  text-decoration: none;
}

.container a h2:hover {
  text-decoration: underline;
}

text-decoration is a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness properties. And text-decoration: none actually means text-decoration-line: none.

But you cannot meaningfully animate text-decoration-line and text-decoration-style. You can only meaningfully animate text-decoration-color (interpolated) and text-decoration-thickness.

So in your case, you can initially set the text decoration to transparent, and then change on hover. You can alternatively animate the thickness, starting with text-decoration-thickness: 0;.

.email-address {
  text-decoration-thickness: from-font;
  text-decoration-color: transparent;
}

.email-address:hover {
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
  transition: all ease-in-out 0.25s;
}

.email-2:hover {
  text-decoration-thickness: 4px;
  text-decoration-color: red;
  transition: all ease-in-out 0.5s;
}

.email-3:hover {
  text-decoration-thickness: 2px;
  text-decoration-color: green;
  transition: all ease-in-out 1s;
}
<ul>
  <li>
    <a class="email-address email-1" href="#">[email protected]</a>
  </li>
  <li>
    <a class="email-address email-2" href="#">[email protected]</a>
  </li>
  <li>
    <a class="email-address email-3" href="#">[email protected]</a>
  </li>
</ul>

Additional Reference:

Upvotes: 0

Majid Ahmadi
Majid Ahmadi

Reputation: 127

you must make underline with after or before and animation it with height or width as you want your code must change like below (add this part to your code):

.container a h2
{
  position:relative ;
}

.container a h2::after
{
  position:absolute ;
  width:100%;
  height: 0px ;
  background:#000 ;
  bottom:-5px ;
  left:0 ;
  content : " " ;
  transition: all ease-in-out 0.25s;
}

.container a h2:hover::after {
   height: 5px ;
}

Upvotes: 1

LSE
LSE

Reputation: 1358

The hover element must be the one with transition property.
I would also advise you to move the :hover to the <a> tag.

Try this:

.container a h2 {
  transition: all ease-in-out 0.25s;
}

.container a:hover h2 {
  text-decoration: underline;
}

Upvotes: 0

Related Questions