Placing a fluid width pseudo-element between two floating elements

Question

EDIT : found out - see answer below for solution.

Background : I have two elements: h1and span. I am trying to put a h1“Heading” element to the left of a container element and a span“Category” element to the right of a container that I made with float: leftand :right,

Problem . I want a dashed line to appear between the elements h1and span. If possible, I would like to use a pseudo-element for this, since it is purely aesthetic, so I am trying to get the h1:afterpseduo element to fill the remaining width of the container element between h1and span.

, HTML :

<header>
    <h1>Title</h1>
    <span class="category">Category</span>
</header>

CSS - :after h1, h1 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

, , , , . W3C , . SO . , :

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

JSFiddle : http://jsfiddle.net/dx48R/

Answer 2

:

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