CSS Arrow Pointer Nodules using before and after pseudo selectors

nodules.css

/* Codepen - http://codepen.io/neilgee/pen/LxXJrE */


.content {
  position: relative;
  background: #20988f;
}


.content:after, .content:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.content:after {
    border-top-color: #20988f;
    border-width: 8px;
    margin-left: -8px;
}