CSS Before and After boxes

Question

I want to draw a simple pencil using CSS only and i am now faced with a problem: Why does declaring before and after selectors seem not to work? I only see the before selector kick in.

The code for what i got right now is here: http://codepen.io/machinarius/pen/vJbge

Answer 1

It seem to me that you want 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;
}

Never forget to position your pseudo-elements.

I do not see, however, how this is necessary. You achieve the exact same thing with border-left and border-right.

Answer 2

You can use this technique rather than using pesoudo clases

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

Answer 3

You can make pencil like this

Html Markup

div class="arrow-up"> /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>