css邊框樣式：之前選擇器沒有采取全高

我有下面的標記，我面臨的問題是：在psuedo選擇器之前，它不佔用它所應用的元素的所有高度，即如大塊，左邊的紅色邊框應用在：之前並沒有完全佔據高度。我需要它採取全高。我該怎麼做，我一直在玩元素高度，線條高度和文字，但沒有運氣。css邊框樣式：之前選擇器沒有采取全高

普拉克 - http://plnkr.co/edit/NPYntTDHeolsM89vYd2Y?p=preview

HTML：

<body> 
    <div> 
     <section> 

     </section> 
    </div> 
    </body>

CSS：

div, section{ 
    margin:0; 
    padding:0; 
} 
div{ 
    background:yellow; 
    width:200px; 
    height:30px; 
} 
section{ 
    background:green; color:white; 
    width:50px; 
    height:30px; float:right; 
} 
section:before{ 
    border-left:5px solid red; 
    content:""; 
}

來源

2014-09-11 whyAto8

因爲你的元素有一個固定的高度，它只是設置僞元素的高度的問題到100％，但您還必須將其顯示爲塊，因爲生成的內容默認爲內聯：

section:before{ 
    border-left:5px solid red; 
    content:""; 
    display:block; 
    height:100%; 
}

來源

2014-09-11 05:52:03 BoltClock

非常棒，謝謝BoltClock，完美地工作.. – whyAto8 2014-09-11 06:01:19

css邊框樣式：之前選擇器沒有采取全高

回答

相關問題