在两个浮动元素之间放置一个流体宽度的伪元素

Question

编辑：想出来 - 请参阅下面的答案以获得解决方案。

背景：我有两个元素：h1和span。我正在尝试在容器元素左侧放置h1“Title”元素，在容器右侧放置span“category”元素，我已经用{{1 }和float: left。

问题：我想在:right和h1元素之间显示虚线。如果可能的话，我想为此使用一个伪元素，因为它纯粹是审美的，所以我试图让span pseduo-element填充{{1}之间的容器元素的剩余宽度}和h1:after。

我正在努力让我的HTML尽可能接近以下内容：

h1

我的CSS到目前为止 - span伪元素当前位于<header> <h1>Title</h1> <span class="category">Category</span> </header> 元素下方，而不是:after和h1之间：

h1

Answer 1

使用此代码：

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

经过更多研究后，我发现我正在寻找的是一个点头。虽然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/