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

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

<body>
  <div >
      <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 >
        <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 >
        <a href="mailto:[email protected]"><img src="./email.png"></a>
        <a href="mailto:[email protected]"><h2>[email protected]</h2></a>
      </div>
  </div>
</body>

And here is the corresponding CSS:

.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;
}

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.

CodePudding user response：

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 ;
}

CodePudding user response：

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;
}