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.

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>