没有得到CSS的预期效果

Question

我试图用CSS获得这种效果（那个小小的灰色条纹东西）：

但是，我所做的一切都不起作用。我的代码如下所示：

<header class="entry-header">
    <div class="entry-title">
        <h1>Contact</h1>
    </div>
    <div class="entry-float"></div>
</header><!-- .entry-header -->

我已尝试floating div.entry-title离开padding div.entry-float，将div.entry-float更改为<span>，尝试使用背景仅div，所有这些都没有成功。

这必须是100％灵活的，因为并非所有标题都是相同的宽度。我宁愿完全避免使用Javascript / jQuery。

有人可以帮忙吗？

Answer 1

我会用一个技巧来做到这一点，你将“line”放置为与容器中心对齐的CSS3伪元素。然后给title元素一个带填充的背景颜色，并将其放在行的顶部。这将允许可变长度标题。

body{
    background:#FAFAFA;
}
.entry-title{
    position:relative;    
    margin:0 110px;
}
.entry-title:before{
    position:absolute;
    content:"";
    top:50%;
    background:#f7f7f7; /* line color */
    left:0;
    right:0;
    height:10px;
    margin:-5px 0 0; /* = half the height value */
}
h1{
    position: relative;
    color: #d9d9d9;
    padding:0 20px 0 0; /* increase this number to add more spacing to the right of your title before the line */
    background:#fafafa; /* same as background color of container element */
    display:inline-block;
}

<强> JSFIDDLE DEMO

Answer 2

有多种方法可以实现这一点，其中一种方法是在标题中添加伪元素，根据需要绝对定位并使用overflow: hidden隐藏额外内容：

<h1>Content</h1>

h1 {
  text-transform: uppercase;
  font-size: 1em;
  color: grey;
  position: relative;
  overflow: hidden;
}

h1:after {
  content: "";
  display: inline-block;
  height: 4px;
  width: 100%;
  background: grey;
  position: absolute;
  top: 8px;
  margin-left: 10px;
}

JSBin