html - 标题右侧的水平线

Question

我正在我的网站上工作，我希望页面标题右侧有一条水平线。目前这是我的标题代码，剥离的 css。

#wrapper #content-holder #main-content #newhead {
margin-top: 0px;
margin-right: -0x;
margin-bottom: 0px;
margin-left: 0px;
font-family: 'Rokkitt', 'Lucida Grande', Helvetica, Arial, sans-serif;
font-size: 40px;
color: #333;
text-align: left;
font-style: normal;
font-variant: normal;
font-weight: 600;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
letter-spacing: -2px;
/*text-transform: uppercase;
border-bottom:1px solid #15A2FF;*/
}

旁边:

<div id="newhead"><?php the_title(); ?></div>

但出于某种原因，我无法让这些行显示在标题文本的旁边。

请帮忙。 http://jsbin.com/ILOlivI/1/edit

Answer 1

我想我会在标题行中使用背景图像，该图像会被文本的背景颜色覆盖。像这样:

  <div id="newHead"><div>the header text</div></span>

  #newHead {
    background: white url(http://tidesonline.nos.noaa.gov/images/black_line.jpg) center left repeat-x;
  }
  #newHead div {
    background-color: white;
    display: inline-block;
    padding-right: 10px;
  }

这是一个 jsfiddle 示例:http://jsfiddle.net/mVqY6/

这仅在文本不太长且文本位于背景图像上方时才有效。在这种情况下，您需要进行一些调整。