标题右侧的分隔符

Question

我想在页面的标题右侧放置一个分隔符，如下所示：

我试用了这段代码，但现在的样子如下：

以下是代码：

<h4 class="section-title">Lastest From Blog</h4>

.section-title {
    font-size:18px;
    background-image: url('images/divider-bar.png');
    background-repeat: repeat-x;
    padding-bottom: 12px;
    color: #6c6c6c;
}

这是小提琴：http://jsfiddle.net/Chead/hrYyg/

Answer 1

只需在标题中加上img标记，然后将文字与图片对齐

即可

<h4 class="section-title">Lastest From Blog <img src="images/divider-bar.png" /></h4>

Answer 2

你去了：http://jsfiddle.net/KQdcr/

只需将文字换成白色背景的范围：

.section-title span { background: white; padding-right: 3px; }

当然，如果您的网页背景不是纯色，则无效。

Answer 3

此处go Try this. 调整容器和分隔符的宽度