Html 标题右侧的水平线

我在我的网站上工作，我希望在页面标题的右侧有一条水平线。目前，这是我的头，剥离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>

但是由于某些原因，我无法在标题文本的旁边显示行

---

请帮忙

若你们想把水平线放在文字的中间线，那个么底部边框就不起作用了，是吗

在我的头顶上，我将使用一个单像素的.gif图像，拉伸到剩余空间的100%，并与文本的中间对齐。。。或者，如果您希望将像素完美对齐到特定的文本大小，请使用一个1px宽的.gif，其中包含您的行，再加上下面x个透明像素

---

您可以引入SVG行，或者在文本旁边浮动一个半高的DIV，顶部或底部带有边框。如果您希望保持纯CSS/HTML，那么DIV解决方案可能最有意义

我想我应该在标题行中使用背景图像，该图像被文本的背景颜色覆盖。大概是这样的：

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

标题文本
#纽黑德{
背景：白色url(http://tidesonline.nos.noaa.gov/images/black_line.jpg)左中重复-x；
}
#纽黑德分区{
背景色：白色；
显示：内联块；
右边填充：10px；
}

下面是一个JSFIDLE示例：

---

仅当文本不太长且文本位于背景图像上方时，此操作才有效。在这种情况下，你需要做一些调整。

你说的“在页眉的右侧是一条水平线”是什么意思？您想要一条水平线与标题文本的中间垂直对齐，从标题中最后一个单词的右侧开始几个像素，到屏幕的最右侧结束？是的，完全正确。谢谢。您应该查看

元素，它创建了一条水平线，比边框更容易操作。