css Question posted in
Some basic documentation can be found here.

Css – Transition effect for text-decoration

I’m trying to apply a text-decoration-color transition effect to a child element of a link. Here’s a sample of that markup:

    <div class="post">
      <a href="/" class="post-link">
        <div>
          <h1>Post name</h1>
          <div>
            Lorem ipsum...
          </div>
        </div>
      </a>
    </div>

The entire post section is a link easy clicking, but on hover I want just the <h1> to underline. So I’m setting the post-link underline color to have an opacity of 0. And on hover set just the opacity to 1.

    .post-link {
      color: #000;
      text-decoration: underline solid rgba(12, 11, 10, 0);
      transition: text-decoration-color 0.2s;
    }

    .post-link:hover h1 {
      text-decoration: underline;
      text-decoration-color: rgba(12, 11, 10, 1);
    }

However, this doesn’t seem to work. The underline appears on hover but without the transition effect.

Tags:

2

Answers


  1. 0

    To achieve the transition effect for the text decoration color on hover, you should apply the transition property to the .post-link class rather than the text-decoration-color. Here’s the corrected CSS:

    .post-link {
  color: #000;
  text-decoration: underline solid rgba(12, 11, 10, 0);
  transition: text-decoration-color 0.2s; /* Add transition here */
}

.post-link:hover h1 {
  text-decoration-color: rgba(12, 11, 10, 1);
}

    This way, the transition effect will be applied smoothly when hovering over the link.

    Login or Signup to reply.
  2. 0

    Set text-decoration to .post-link h1:

    .post-link {
  color: #000;
  text-decoration: none;
}

.post-link h1 {
  text-decoration: underline solid rgba(12, 11, 10, 0);
  transition: text-decoration-color 0.2s;
}

.post-link:hover h1 {
  text-decoration-color: rgba(12, 11, 10, 1);
}
    <div class="post">
  <a href="/" class="post-link">
    <div>
      <h1>Post name</h1>
      <div>
        Lorem ipsum...
      </div>
    </div>
  </a>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search