H2下面的边界图像

Question

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

是否有可能，我怎样才能用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的引文。