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

我有一个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使其正常工作：(

---

指向正确主题的网站链接：

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

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

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

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

他们所做的是在

标记和g中添加一个

在边框底部填充跨距，而不是

通过这种方式，

将箭头作为背景图像，并且由于

在底部添加了一个3倍的填充，因此它完全对齐

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

---

他们所做的是在

标记内放置

，并将跨度置于底部边框，而不是

通过这种方式，

将箭头作为背景图像，并且由于

在底部添加了一个3倍的填充，因此它完全对齐

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

---

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

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

参见小提琴参考：

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

<h2>The Header Is Here</h2>

标题在这里

---

不需要额外的标记！

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

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

参见小提琴参考：

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

<h2>The Header Is Here</h2>

标题在这里

---

不需要额外的标签！

那么，让一条线延伸到900像素宽可以吗？你的答案既棒又简单（这几乎让我尴尬哈哈）但我担心的是图像的大小和加载时间。我肯定图像的大小会很小，但在同一页上可能有十几个图像之后，使用css下划线不是更好吗？这样简单的图像通常使用GIF或PNG压缩得很好。此外，它们由浏览器缓存，甚至带有适当的HTTP头页面请求。那么，让一条线延伸到900像素宽可以吗？你的回答非常棒而且简单（这几乎让我感到尴尬哈哈）但我担心的是图像的大小和加载时间。我肯定图像的大小会很小，但在同一页上可能有十几个图像之后，使用css下划线不是更好吗？这样简单的图像通常使用GIF或PNG压缩得很好。此外，它们由浏览器缓存，甚至带有适当的HTTP头页面请求。这太完美了。我将努力进行修复。出于某种原因，我在8分钟内无法接受您的回答。谢谢！这很有意义，而且解释得很好。因此，这意味着我需要给客户一段示例代码，以便他们能够更正自己的H2标题？类似于

我的标题示例

…？Just捕获了您的编辑。感谢您提供的详细帮助。非常感谢您。这非常完美。我将致力于修复此问题。出于某些原因，我在接下来的8分钟内无法接受您的答案。谢谢！这很有意义，而且解释得很好。因此，这意味着我需要向客户提供一段示例代码，以便他们能够自己制作H2标题是否正确？类似于

我的标题示例

…？刚刚捕捉到您的编辑。感谢您提供的详细帮助。非常感谢您。嘿，这是非常酷的CSS。我不知道您可以这样做箭头。谢谢您，马克。由于其他图形和对箭头的修改，我不得不选择使用图像的答案-是自定义和潜在的lly有线条和渐变等。但是非常好。嘿，这是非常酷的CSS。我不知道你可以用这种方式制作箭头。谢谢你，马克。我不得不同意这个答案，因为其他图形和对箭头的修改-是自定义的，可能有线条和渐变等。但是非常好。