css - 要素の下の背景色と背景画像

Question

アイデアは、人々が必須フィールドへの入力に失敗したときに表示される有効でないエラーのヒントを吹き出しのように表示させることでした。そのため、矢印の画像がテキストの中央と下に表示され、見逃したフィールドを指すことになります。

ここでフィドル

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 を簡単に編集できれば簡単ですが、プラグインを使用していて、将来的にはプラグインを自由に更新できるようにしたいので、やりたくありません。

質問：

純粋な CSS ソリューションはありますか?

そうでない場合 (そして、私はそうではないと思う)、この問題を解決する最もクリーンな方法は何ですか? add_filter を使用して html を変更し、ツールチップの周りに div を配置して、bg 画像を追加できますか? css "content:" を使った何か、js ソリューションですか?