イメージを別の要素と一貫して並べる方法を教えてください。

Question

私はこれをやりたいと思います -

私はコードに複数のh2見出しがあります、そして、私はそれらのすべてに左右両方のオリオールズロゴのイメージを持たせたいと思います。私はそれらの100を持っていると言うと、オリオールズのロゴからレイヴンズのロゴにそれらを変更したいと思います。明らかに、それらを変えるには年月がかかるでしょう。これを避けるために

が、私はこれを行うためにCSSルールを使用することができるようにしたい：

H2の見出しがあるたびに、あなたはレイブンズのロゴを表示。 しかし、野球シーズンの開幕日にオリオールズのロゴに変更してすぐに戻すことができます。 （完全にボルチモアファンボイではない）

ありがとう！

Answer 1

CSSの擬似要素：beforeと：afterを使用すると、要素の前後にイメージを追加できます。

Here is a working fiddle

h2:not(.current):before { 
    content: " "; 
    background-image: url(.....); 
} 

h2.current:before { 
    content: " "; 
    background-image: url(.....); 
}