html - 标题箭头始终与标题一起位于右侧

Question

我需要将右侧箭头始终保持在标题的右侧，但在某些情况下只有箭头向下。（如果您移动小提琴预览手柄，您可能会看到）。以下是 HTML 结构和使用的 css。

<div class="headline">
  <h3>
    <a href="#">Bowie comeback reaches number six<span class="arrow">&nbsp;</span></a>
  </h3>
</div>

CSS：

.headline {
    padding: 15px 12px 12px;
}
h3 {font-size:30px;}
.arrow{
    background: transparent url(http://blog.sameerast.com/wp-content/themes/elements-of-seo_1.4/images/bullet.gif) no-repeat;
    display: inline-block;
    height: 22px;
    margin-left: 5px;
    margin-top: 0;
    position: relative;
    top: 10px;
    width: 15px;
}

小提琴：http: //jsfiddle.net/9Mst7/

我有其他方法或最好的方法来赢得这个吗？

更新：当标题出现在第二行时，箭头也应该坐在旁边。

Answer 1

删除跨度并将箭头图标添加为锚点上的背景图像<a>。

HTML：

<div class="headline">
  <h3>
    <a href="#" class="arrow">Bowie comeback reaches number six ddd</a>
  </h3>
</div>

CSS：

.headline {
    padding: 15px 12px 12px;
}
h3 {font-size:30px;}
.arrow{
    padding-right: 10px;
    background: transparent url(http://blog.sameerast.com/wp-content/themes/elements-of-seo_1.4/images/bullet.gif) right center no-repeat;
}

这是小提琴：http: //jsfiddle.net/6R6Ar/2/