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


i want make 2 vertical line in same row using css.

i want create : example screenshot

i have added 1 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 Pゴシック", "ms pgothic", sans-serif; font-weight: bold; color: #778899; } 

what recommend make use of :before pseudo-selector. you'll want make element itself narrow line, :before appear right of border-left. make :before thick line.

you can add 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 Pゴシック", "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 in order border in :before appear, you'll need give :before content property, can left empty.

hope helps! :)


Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -