Border keeps being under first line-CodePudding

I am trying to add border to a bottom of the text, however whenever the text has two lines, the border keeps under the first sentence. It should take the second sentence and move 15 px from it. How can I fix this? The second red line should be under word dawdwada

.box {
  width: 200px;
  border: 1px solid black;
  height: 200px;
}

.link {
  position: relative;
  margin-bottom: 20px;
}

.link a::after {
  position: absolute;
  content: "";
  top: 15px;
  left: 0;
  height: 2px;
  background: red;
  width: 100%;
}

<div >
<div >
  <div >
  <a>waddwaudwahidauidwa</a>
  </div>
    <div >
  <a>waddwaudwahidauidwa dawdwada </a>
  </div>
</div>
</div>

CodePudding user response：

instead of using ::after, you can just use border-bottom on link

CodePudding user response：

Use text-decorations instead of borders

  <a style="text-decoration: underline;">waddwaudwahidauidwa dawdwada </a>

go to :enter link description here