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

【问题标题】：Placing a fluid-width pseudo-element between two floated elements在两个浮动元素之间放置一个流体宽度的伪元素
【发布时间】：2013-11-30 07:51:56
【问题描述】：

编辑：想通了 - 请参阅下面的答案以获取解决方案。

背景：我有两个元素，h1 和 span。我试图将h1“Title”元素放在容器元素的左侧，将span“category”元素放在容器的右侧，我已经用float: left和:right完成了.

问题：我希望在h1 和span 元素之间出现一条虚线。如果可能的话，我想为此使用一个伪元素，因为它纯粹是美学的，所以我试图让h1:after pseduo-element 填充h1 和@ 之间的容器元素的剩余宽度987654332@。

我正在尝试使我的 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;
}

【问题讨论】：

标签： html css fluid-layout pseudo-element

【解决方案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;
}

【讨论】：

感谢代码，但我可能会在背景图像上使用这些元素，并在标题和类别上放置背景颜色以隐藏完整的虚线将不起作用 - 我'我试图找到一个解决方案，让线条只跨越标题和类别之间的宽度。
我认为这是最简单的方法，抱歉我不知道 CSS 有什么其他方法
没问题，如果你有兴趣我想我找到了另一种方法；我已经把它贴在下面了

【解决方案2】：

好的，经过更多研究，我发现我正在寻找的东西称为点领导者。虽然 W3C 工作草案中有一个关于它们的部分 here，但它们似乎还没有得到很好的实现。我在 SOhere 上找到了另一种方法。使用该答案，我将代码修改如下：

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/

【讨论】：