How to Make Two Vertical Line in Same row using CSS - html

Question

I want to make a two vertical line in the same row using CSS.
I want to create like this :
I have already added one vertical thick line (Refer below script )
.desg {
border-bottom: 2px solid LightSlateGrey;
border-left: 15px solid LightSlateGrey ;
background-color: white;
font-size: 20px;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-weight: bold;
color: #778899; }

Answer 1

What I would recommend is to make use of the :before pseudo-selector. You'll want to make the element itself the narrow line, as the :before will appear to the right of border-left. Then make the :before the thick line.
You can even add a bit of margin on either side:
.desg {
border-bottom: 2px solid LightSlateGrey;
border-left: 3px solid LightSlateGrey;
background-color: white;
font-size: 20px;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-weight: bold;
color: #778899;
}
.desg:before {
border-left: 15px solid LightSlateGrey;
margin-left: 3px;
margin-right: 5px;
content: '';
}
<div class="desg">Text</div>
Remember that in order for the border in :before to appear, you'll need to give :before a content property, which can be left empty.
Hope this helps! :)

Answer 2

Rather than using border for something like this I'd go with using<hr>or div tag.
While using <hr> you'd need to set border width and while using div you can use width or border. Will provide code shortly or you can go without :beforepseudo class