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

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

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/

Answer 2

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;
}