css - 带有下划线和箭头背景图像的 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 上查看了“检查元素”，但似乎无法调整 CSS 以使其正常工作。:(

网站链接到看起来正确的主题：http: //www.joomlart.com/demo/#ja_travel

Answer 1

在 H2 中添加一个跨度。将边框应用于该跨度并使用 H2 上的 padding-bottom 来调整箭头位置。

Answer 2

他们正在做的是将 a<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

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