CODEWITHSUNDEEP
htmlcss
SM Abdullah
SM Abdullah

Reputation: 7

How to Make Two Vertical Line in Same row using CSS

I want to make a two vertical line in the same row using CSS.

I want to create like this : Example Screenshot

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; }

Upvotes: 1

Views: 1375

Answers (2)

Syed Huzaifa Hassan
Syed Huzaifa Hassan

Reputation: 796

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

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42384

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! :)

Upvotes: 5

Related Questions