Placing a fluid-width pseudo-element between two floated elements - html

Question

EDIT: figured it out - see the answer below for solution.
Background: I have two elements, an h1 and a span. I'm trying to place the h1 "Title" element on the left of the container element and the span "category" element on the right of the container, which I've done with float: left and :right.
Problem: I'd like a dotted line to appear between the h1 and span elements. If possible, I'd like to use a pseudo-element for this since it's purely aesthetic, so I'm trying to get the h1:after pseduo-element to fill the remaining width of the container element between the h1 and span.
I'm trying to keep my HTML as close to the following as possible:
<header>
<h1>Title</h1>
<span class="category">Category</span>
</header>
My CSS so far - the :after pseudo-element is currently positioned beneath the h1 element, as opposed to between the h1 and span:
header {
display: block;
background: cyan;
width: 80%;
margin: 0 auto;
}
h1 {
display: block;
float: left;
}
h1:after {
display: block;
float: left;
width: 100%;
border-bottom: 1px dotted black;
content: " ";
}
span {
display: block;
float: right;
background: green;
}

Answer 1

use this code:
jsFiddle
HTML
<div class="container">
<span>title</span>
<span class="category">category</span>
</div>
CSS
div{
width:100%;
position:relative;
height:50px;
border:1px solid;
}
span{
line-height:50px;
background:#fff;
padding:0 10px;
float:left;
position:relative;
z-index:1;
}
span.category{
float:right;
}
.container:after{
content:"";
position:absolute;
width:100%;
height:0;
border-bottom:1px dotted #4c5660;
top:50%;
left:0;
}

Answer 2

OK after more research, I discovered that what I'm looking for is called a dot leader. While the W3C Working Draft has a section on them here, they don't seem to be well-implemented yet. I found another approach on SO here. Using that answer, I revised my code as follows:
HTML:
<header>
<h1>Title</h1>
<span>Category</span>
</header>
CSS:
header {
overflow: hidden;
}
h1 {
float: left;
padding: 0 .4em 0 0;
margin: 0;
}
span {
float: right;
padding: 0 0 0 .4em;
margin: 0;
}
/* Dot Leader */
header:after {
content: "";
display: block;
overflow: hidden;
height: 1em;
border-bottom: 1px dotted;
}
Here's a JSFiddle with the result: http://jsfiddle.net/dx48R/