如何使用CSS在同一行中創建兩條垂直線使用CSS

我想在同一行使用CSS創建兩條垂直線。如何使用CSS在同一行中創建兩條垂直線使用CSS

我想創建這樣的： Example Screenshot

我已經添加了一個垂直粗線（請參考下腳本）

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

來源

2017-08-15 SM Abdullah

我會建議是利用:before假的選擇。您需要將元素本身劃定窄線，因爲:before將顯示爲右邊的border-left。然後製作:before粗線。

你甚至可以加一點margin兩邊：

.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>

請記住，爲了在:before邊境出現，你需要給:before一個content屬性，可以留空。

希望這會有所幫助！ :)

來源

2017-08-15 03:30:38

非常感謝你！它正在工作。 –

或者：幾乎沒有修改的僞類後 –

真棒;樂意效勞！一旦你確認這個解決方案解決了你的問題，請不要忘了點擊表決下方的灰色檢查來[**接受這個答案**]（https://stackoverflow.com/help/someone-answers）按鈕 - 這會將其從「未答覆的問題」隊列中移除，併爲問題提問者和問題答疑者授予聲譽。詢問任何問題後，您可以在15分鐘內完成。當然，在說，你沒有義務標記任何答案是正確的，但它確實有助於保持StackOverflow上的事情順利進行:) –

而不是使用邊界這樣的事情，我會去使用<hr>或div標記。使用<hr>時，您需要設置邊框寬度，並在使用div時可以使用width或border。將提供代碼很快，或者你可以去沒有:before僞類

來源

2017-08-15 03:37:21

如何使用CSS在同一行中創建兩條垂直線使用CSS

回答

相關問題