CSS之前和之後的盒子

我想用CSS畫一個簡單的鉛筆，我現在面臨一個問題：爲什麼在選擇器之前和之後聲明不工作？我只看到在之前選擇踢CSS之前和之後的盒子

什麼，我得到了現在的代碼是在這裏：http://codepen.io/machinarius/pen/vJbge

2013-12-11 Machinarius

這似乎給我，你要this。

.pencil { 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    margin-left: -5px; 
    background: #55A5FF; 
    width: 20px; 
    height: 150px; 
} 

.pencil:before, .pencil:after { 
    width:10px; 
    background: #4264E8; 
    height: 150px; 
    content: ""; 
    display: block; 
    position: absolute; 
} 
.pencil:before { 
    left: -10px; 
} 

.pencil:after { 
    right: -10px; 
}

千萬不要忘記位置您的僞元素。

但是，我沒有看到這是如何必要的。你可以用border-left和border-right獲得完全相同的結果。

來源

2013-12-11 06:11:19

This hit the spot，謝啦。注意：我明確沒有使用邊界，以便在僞類之前和之後學習。 – Machinarius

您可以使用這種技術，而不是使用pesoudo clases

http://css-tricks.com/snippets/css/css-triangle/

來源

2013-12-11 06:41:16 user3064303

可以使鉛筆這樣

HTML標記

DIV CLASS = 「向上箭頭」>/DIV div class =「arrow-down」/ div

<style> 
.arrow-up 
{ 
    width:40px; 
    height:150px; 
    background:#000; 

} 

.arrow-down { 
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 

    border-top: 20px solid #f00; 
} 


</style>

來源

2013-12-11 06:50:36 user3064303

CSS之前和之後的盒子

回答

相關問題