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之前和之后的盒子

回答

相关问题