CSS pseudo after underline with floats - css

Question

I have an underline for headings created with pseudo :after elements, when this heading is displayed to the right of a floated image/div, the underline is shifted over the image/div.
h2:after {
content: '';
position: relative;
max-width: 100px;
display: block;
height: 4px;
background: #0073ae;
}
Here's a short codepen explaining it: http://codepen.io/costelc/pen/GqgdvB
Any idea is appreciated. Thanks

Answer 1

Floats are out-of-flow, so this is expected. If you don't want the header to overlap the float, you should establish a block formatting context.
A common way is setting overflow to anything but visible, e.g.
h2 {
overflow: hidden;
}
From CSS 2.1 Floats,
Since a float is not in the flow, non-positioned block boxes created
before and after the float box flow vertically as if the float did not
exist.
The border box of a table, a block-level replaced element, or an
element in the normal flow that establishes a new block formatting
context (such as an element with overflow other than visible)
must not overlap the margin box of any floats in the same block
formatting context as the element itself
body {
max-width: 300px;
}
.right {
width: 100px;
height: 100px;
background: #eee;
float: right;
margin: 0 0 0 20px;
}
.clear {
clear: both;
}
.left {
width: 100px;
height: 100px;
background: #eee;
float: left;
margin: 0 20px 0 0;
}
h2 {
overflow: hidden;
}
h2:after {
content: '';
position: relative;
max-width: 100px;
display: block;
height: 4px;
background: #0073ae;
}
<h2>Good heading here</h2>
<div class="right"></div>
<h2>Another good heading here</h2>
<p>anything here</p>
<br class="clear">
<div class="left"></div>
<h2>Bad heading here</h2>
<p>anything here</p>