how to add solid line between word or sentence? HTML CSS-CodePudding

I was wondering how to add these lines between words/sentences as I saw many of solution involve the border-bottom-line or js. I was just curious that can these lines be done simply just using a span or div(containing line and sentence) or something else. I've try but I wonder there is way that is better than mine.

click to see image example

.ll{
  display: flex;
  flex-direction: row;
}

<div >
  <span> one </span>
  <span>-</span>
  <span> two </span>
  <span>-<span>
  <span> three </span>
</div>

CodePudding user response：

you can do it with pseudo elements.

.ll{
  display: flex;
  flex-direction: row;
}
span:after{
  content: '';
  display: inline-block;
  width: 15px;
  height: 4px;
  border-top: 2px solid red;
  margin: 0 10px;
}
span:last-child:after{
  width: 0;
  margin: 0;
}

<div >
  <span> one </span>
  <span> two </span>
  <span> three </span>
</div>