这样做的目的是让当人们没有填写必填字段时出现的无效错误提示像语音泡泡一样显示出来。因此箭头图像显示在文本的中心和下方，并将指向他们遗漏的字段。

Fiddle here

HTML:

<span class="wpcf7-not-valid-tip">Please fill the required field.</span>

CSS:

.wpcf7-not-valid-tip {
        background: red;
        color: white;
        padding: 10px;
        width: 100px;
        background-position: 0 0; 
        background-repeat: no-repeat;
        background-image: url(\'http://s24.postimg.org/qacevkf7l/green_error_arrow.png\');  
}

正如你所看到的，我有一个背景色和箭头图像，它需要位于元素的中间和下面，但是，当然，如果你使用背景位置来定位它，图像是隐藏的，因为它不能溢出元素本身之外。如果我可以轻松地编辑HTML，这将很容易，但我不希望这样做，因为我正在使用插件，希望将来可以免费更新插件。

QUESTION:

有没有纯CSS解决方案？

如果没有（我怀疑没有），解决这个问题最干净的方法是什么？我会使用add\\u filter来更改html，在工具提示周围放置一个div，然后将bg图像添加到工具提示中吗？有css“内容：”，js解决方案？

这样做的目的是让当人们没有填写必填字段时出现的无效错误提示像语音泡泡一样显示出来。因此箭头图像显示在文本的中心和下方，并将指向他们遗漏的字段。

Fiddle here

HTML:

<span class="wpcf7-not-valid-tip">Please fill the required field.</span>

CSS:

.wpcf7-not-valid-tip {
        background: red;
        color: white;
        padding: 10px;
        width: 100px;
        background-position: 0 0; 
        background-repeat: no-repeat;
        background-image: url(\'http://s24.postimg.org/qacevkf7l/green_error_arrow.png\');  
}

正如你所看到的，我有一个背景色和箭头图像，它需要位于元素的中间和下面，但是，当然，如果你使用背景位置来定位它，图像是隐藏的，因为它不能溢出元素本身之外。如果我可以轻松地编辑HTML，这将很容易，但我不希望这样做，因为我正在使用插件，希望将来可以免费更新插件。

QUESTION:

有没有纯CSS解决方案？

如果没有（我怀疑没有），解决这个问题最干净的方法是什么？我会使用add\\u filter来更改html，在工具提示周围放置一个div，然后将bg图像添加到工具提示中吗？有css“内容：”，js解决方案？