Vertical line centered above div - html

Question

I am trying to get this done in HTML and CSS. I am able to get the box done using the border and padding. But how do I get the line above?
Here is what I have so far:
.november {
padding: 1%;
border: 2px solid #000;
}
<div class="november">November 2014</div>

Answer 1

Pseudo element goodness
The HTML
It's a one liner:
<div>November 2014</div>
The CSS
The vertical line is created with a :before pseudo element:
The :before pseudo element is given position: absolute
left: 50% shifts the line to the middle and bottom: 100% pops the line above the div
The line is created by the 2px width
margin-left: -2px shifts the line 2px to the left to correctly offset its position (this is equal to the width)
The div is made position: relative and the position: absolute :before will position itself in relation to it. Space above the div is created with the top margin.
Complete Example
In this example, display: inline-block allows the div to expand and retract with its contents.
div {
padding: 10px;
border: solid 2px #000;
display: inline-block;
position: relative;
margin-top: 50px;
}
div:before {
content: '';
width: 2px;
height: 50px;
background: #000;
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -2px;
}
<div>November 2014</div>

Answer 2

I tried this and got it right:
body {
background: #EEE;
}
.november {
margin: 0;
padding: 1%;
border: 2px solid white;
clear: both;
}
<div class="col-sm-2">
<hr style="width: 2px; border-top: 50px solid white; padding: 0; text-align: center; margin: auto;" />
<div class="november">November 2014</div>
</div>