Horizontal line that take up the rest of the space to the right of text with multiple line-CodePudding

CodePudding user response：

  you can achieve that by making the height of the box 0.5em than displaying its border-top only. example:

.h-line {
position: relative; }

.h-line::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.5em;
    border-top: 1px solid black;
    z-index: -1;
  }

CodePudding user response：

You can try like below:

.max-width {
  width: 250px;
  border: 1px solid red;
  overflow: hidden; /* you need this to hide the overflow */
}

.h-line::after {
  content: "";
  display: inline-block;
  vertical-align: middle; /* middle of the text */
  margin-left: .5rem;
  height: 2px; /* control the height of the line */
  border-image: linear-gradient(rgb(100, 91, 91) 0 0) fill 0//0 100vw 0 0; /* the color here */
}

<div >
  <h5 >Horizontal line not displayed when too many letters </h5>
</div>

<div >
  <h5 >Horizontal line visible</h5>
</div>