Html 可以添加带有css伪内容的图像标题吗？

我正在寻找最简单、最易维护的方法：

这些是文本段塞，将附加到整个站点的某些图像中。他们都说了同样的话，但图像是多种多样的，来自CMS

我知道如果将图像设置为position relative，并在绝对定位的子div中使用带有“there's a better way”的div，我将如何实现这一点

然而，由于这需要将HTML添加到每个得到这种处理的图像中，所以我正在寻找一种方法，使用：before伪元素使用css类来实现这一点。到目前为止，将类应用于包装链接没有任何效果：

<a href="#" class="tabw"><img src="imagepath" alt=""></a>

.tabw img:before {
content: 'theres a better way';
color: red;
font-size: 18px;
}

塔布·伊姆：以前{
内容：“有更好的方法”；
颜色：红色；
字号：18px；
}

---

这可能吗？在CSS中使用整个内容意味着我所要做的就是让CMS在需要时应用class属性。

我将通过jQuery这样做：

Html

<div class="thumb">
    <img src="http://www.zupmage.eu/up/NvBtxn7LHl.png" alt="cover"/>
    <div class="caption">My caption</div>
</div>

JQuery

$('.thumb').hover(function() {
    $(this).find('.caption').fadeIn();
}, function() {
    $(this).find('.caption').hide();
});

---

请参见

是的，

：：在

之前和

：：在

之后，不要处理图像。但是您可以将它们应用于包装器 链接：

---

如果你想将文本添加到HTML中，你必须在链接中加入一个真实的元素（并对其应用相同的规则，但不包含

内容
）
请注意：在Firefox21和IE 9/10中，这对超大图像不起作用。它强制图像为100%，即使全局设置为最大宽度：100%

我必须遵循我在上面选择的答案，但是将A标记设置为
display:block
，而不是
display:inline block
，以进行修复。
我没有意识到图像和伪元素。它快把我逼疯了。这正是我想做的。谢谢，谢谢，但是有点太复杂了。另外，如果我打算在html中添加额外的div，我可以在没有jquery的情况下完成这项工作。我正在寻找一种解决方案，将标题内容保留在CSS中。
$('.thumb').hover(function() {
    $(this).find('.caption').fadeIn();
}, function() {
    $(this).find('.caption').hide();
});

a{
  position: relative;
}

a, a > img{
  display:inline-block;
}

a::before{
  content: 'theres a better way';
  position: absolute;    
  left: 0;
  top: 0;     
  width: 80%;
  height: 20px;
  left: 10%;  
  background: #000;
  opacity: 0.4;      
  color: red;
  font-size: 18px;
}