css - H2下方的边框图片

Question

我想在我的样式表中的每个 H2 下方添加一个图像。我尝试了背景图片，但它涵盖了措辞。我也尝试了border-image，但它无法正常工作（不确定我是否理解正确。

有可能吗，我怎样才能只用 CSS 来实现它

 // Sample CSS
 #content_area h2 {
     color: #107408;
     -moz-border-image:url(h2_background.png) 30 30 round; /* Firefox */
     -webkit-border-image:url(h2_background.png) 30 30 round; /* Safari */
     -o-border-image:url(h2_background.png) 30 30 round; /* Opera */
     border-image:url(h2_background.png) 30 30 round;
 }

Answer 1

我会回到你原来的 h2 并做这样的事情：

h2{
     background:#ffffff url('myimage.png') no-repeat left bottom;
     padding-bottom:4px;
}

填充将增加图像可以放置的额外空间

Answer 2

您可以使用:after伪元素。

":after" 伪元素可用于在元素内容之后插入一些内容。

以下示例在每个元素之后插入图像：

示例：

h2:after {
   content:url(smiley.gif);
}

来自CSS Pseudo-elements 的引用。