如何让一个图像与另一个元素一致地并排？

Question

我想这么做-

我在一个代码中有多个h2标题，我希望所有这些标题在左边和右边都有一个金丝雀标志的图像。假设我有100个，并且想要将它们从金丝雀徽标改为乌鸦徽标。显然，更改它们需要很长时间。

为了避免这种情况，我希望能够使用css规则来执行此操作：

每次出现H2标题时，您都会显示一个乌鸦徽标。但是，我可以在棒球赛季的第一天将其更改为金丝雀标志，然后迅速将其更改回来。(完全不是巴尔的摩的粉丝)

谢谢!

Answer 1

使用CSS的伪元素:之前和:之后，您可以在元素之前和之后添加图像。

Here is a working fiddle

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

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