Текстовые теги родителя с Flex Box должны получить собственную ширину авто, а не полную ширину

Question

Так что, возможно, это довольно простой вопрос, но я не могу его решить .. Может быть, я упускаю из виду вещи.

У меня есть родительский div с двумя детьми. H3 сверху и пролёт снизу. Итак, я получаю это:

Это хорошо. Теперь, когда я наведите курсор на сообщение, я хочу, чтобы интервал получил подчеркивание. Я делаю это с: после. Но и h3, и span получают полную ширину своего родителя. Таким образом, подчеркивание интервала не совпадает с самим интервалом. Но проходит мимо текста, где я хочу, чтобы go.

Я получаю это:

Так что в основном я хотите, чтобы h3 и span имели собственную ширину авто, в зависимости от содержимого. Не полная ширина их родителя.

<div class="post-info">
 <h3><?php the_title();?></h3>
 <span>read more</span>
</div>

s css:

.post-info{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    height: 100px;
    background-color: $white;
    h3{
      font-weight: 700;
    }
    span{
      color:$purple;
      font-weight: 200;
      &:after{
        display: flex;
        width: 0%;
        height: 2px;
        background-color: $ant;
        content:"";
        transition: .2s ease;
      }
    }
    &:hover{
      span{
        &:after{
          width: 100%;
        }
      }
    }
  }

Так что я хочу получить это право без использования float et c. Pure flex box или grid.

Или, если вы знаете другое решение, тогда это тоже нормально.

Спасибо!