css - CSS前后框

我只想使用CSS画一支简单的铅笔，现在我面临一个问题：为什么在选择器之前和之后声明似乎不起作用？我只会看到前选择器启动。

我现在得到的代码在这里：http://codepen.io/machinarius/pen/vJbge

最佳答案

在我看来，您想要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可以实现完全相同的效果。