带有下划线和箭头背景图像的CSS h2元素

Question

我有一个H2元素，我想加下划线，并在底部边框线下方有一个箭头图形。

目前，箭头显示在上方，如果我更改背景坐标以降低箭头，它就会开始消失。

我的代码：

h2 {
    background: url("images/arrow-title.png") no-repeat scroll 10px 27px transparent;
    line-height: 17px;
    padding-bottom: 15px;
    text-transform: uppercase;
    border-bottom: 2px solid #00a7a8;
}

目前正在做的事情的图像：

我想做的事情的图像：

最后，一个网站链接到一个正确执行此操作的主题。我在Firefox上查看了“inspect元素”，似乎无法调整CSS以使其正常工作。 ：（

指向正确的主题的网站链接：http://www.joomlart.com/demo/#ja_travel

Answer 1

在H2中添加跨度。将边框应用于该跨度并使用H2上的填充底部来调整箭头位置。

Answer 2

他们正在做的是将<span />放在<h2 />标记内，并将跨度设为边框 - 底部而不是<h2 />

这样<h2 />将箭头作为背景图片，因为<span />在底部添加了3px填充，所以它完全对齐。

<h2>
  <span>
    This is my header
  </span>
</h2>

然后是这样的

h2{
  background: url("../images/arrow-title.png") no-repeat left center;
}
span{
  border-bottom: 2px solid black;
  padding-bottom: 3px;
}

Answer 3

如果您不想使用背景图片，可以尝试使用伪元素：

h2 {
line-height: 17px;
padding-bottom: 15px;
text-transform: uppercase;
border-bottom: 2px solid #00a7a8;
position: relative;
}
h2:before {
    content: '\25bc';
    position: absolute;
    top: 100%;
    left: 5em;
    color: #00a7a8;
}

请参阅小提琴参考：http://jsfiddle.net/audetwebdesign/kFSvL/

主要优点是标记的简单性：

<h2>The Header Is Here</h2>

无需额外标签！

Answer 4

制作背景图像的下划线部分。它显然应该从视觉角度来看，所以它也可能来自技术角度。