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 : 
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
Post a Comment