如何讓圖像與其他元素保持一致？

Question

我想這樣做 -

我在代碼中有多個h2標題，並且我希望他們都在左右兩側都有金鶯徽標的圖像。假設我有100個，並且希望將它們從Orioles徽標更改爲Ravens徽標。顯然，改變它們需要很長時間。

爲了避免這種情況，我希望能夠使用一個CSS規則來做到這一點：

每當有一個H2標題，你顯示一個烏鴉的標誌。 但是，我可以在棒球賽季的開幕日將其更改爲Orioles徽標，然後迅速將其更改回來。 （完全不是巴爾的摩fanboi）

謝謝！

Answer 1

使用CSS的僞元素：before和之後：可以在元素前後添加圖像。

Here is a working fiddle

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

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