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.
.ll{
display: flex;
flex-direction: row;
}<div class="ll">
<span> one </span>
<span>-</span>
<span> two </span>
<span>-<span>
<span> three </span>
</div>
>Solution :
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 class="ll">
<span> one </span>
<span> two </span>
<span> three </span>
</div>