CSS :after & :before acting very strangely

Ok, so I have a simple div with a height and width set. Before and after also have height and width set. They are all set to display as blocks, and the pseudo-elements have content "".

The :before is inside the content, not before it. And the :after has a load of weird spacing before it.

HTML:

<div class="board">
   Hi
</div>

CSS:

.board {
  width: 260px; /*300 - 40*/
  height: 400px; /*480 - 40 - 40*/
  line-height: 400px;
  color: #164d87;
  font-size: 20px;
  font-weight: 900;
  margin: 0 auto;
  background:
    linear-gradient( 0deg,
      rgba(2, 188, 226, 0.5) 0%,
      rgba(51, 219, 253, 0.5) 25%,
      rgba(51, 219, 253, 0.5) 75%,
      rgba(2, 188, 226, 0.5) 100%
    );
  text-align: center;
  border: 3px solid #2B2B2B;
}
.board:before, .board:after {
  content: "";
  display: block;
  height: 40px;
  width: 300px;
  margin-left: -20px;
}

Codepen: http://codepen.io/MattCowley/pen/ZOQMNg