[CSS]疑似要素のカラー指定をインラインで行いたい場合のテクニック

ウェブページを作る際、運用などでさまざまな制約が生じることがあります。
ここでは、擬似要素を使ったスピーチバブルのカラーの指定をインラインで行いたい場合のテクニックを紹介します。

Speech Bubble Arrows that Inherit Parent Color

[ad#ad-2]

下記は各ポイントを意訳したものです。

画像を使用しないで、吹き出し状のエレメント（スピーチバブル）を作る時、小さい三角を疑似要素で作るとします。
下記のような感じです。

もし、このピンク色の指定をCSSファイルにセットしないで実装する必要がある場合、どのようにしたらよいでしょうか？
スピーチバブルのdiv要素にインラインで、背景をピンクに指定してみます。

HTML

<div class="speech-bubble" style="background: pink;">
   I like bananas, because they have no bones.
</div>

しかし、これではdiv要素の背景はもちろんピンクになりますが、疑似要素で作った三角にはピンクが適用されません。

[ad#ad-2]

ここに、素晴らしい解決方法があります！

疑似要素にカラーを継承させるため、実際には存在しないボーダーにカラーを設定し、それをインラインで指定します。

HTML

<div class="speech-bubble" style="border-color: pink; background: pink;">
   I like bananas, because they have no bones.
</div>

インラインでボーダーにピンクを指定したので、「inherit;」を使って継承するように疑似要素のスタイルシートを変更します。

CSS

.speech-bubble:after {
   content: "";
   position: absolute;
   top: 100%;
   left: 20px;
   border-top: 20px solid black;
   border-top-color: inherit;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
}

これでインラインの指定でカラーを変更できるようになりました。
もちろん、他のカラーでも問題ありません。

デモページでは、レッドとグリーンのスピーチバブルがインラインで指定されています。

デモページ