Размещение псевдоэлемента с псевдоожиженным слоем между двумя плавающими элементами

Question

EDIT: разобрался - см. Ответ ниже для решения.

Фон: У меня есть два элемента: h1 и span. Я пытаюсь поместить элемент «Название» h1 слева от элемента контейнера и элемент «0», расположенный в правой части контейнера, с помощью float: left и :right.

Задача: Я хочу, чтобы между элементами h1 и появилась пунктирная линия. Если возможно, я хотел бы использовать псевдоэлемент для этого, поскольку он чисто эстетичен, поэтому я пытаюсь получить pseduo-элемент h1:after, чтобы заполнить оставшуюся ширину элемента контейнера между h1 и 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 содержит раздел о них here, они пока не очень хорошо реализованы. Я нашел другой подход на SO here. Используя этот ответ, я пересмотрел свой код следующим образом:

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