Css 仅水平翻转一个背景图像

我有一个标题和两个背景图像（每边一个）。这样：

HTML:

看

现在我使用两张图片，由于两张图片都相同但水平翻转，我只想使用一张图片并使用CSS翻转另一张图片。为了节省一些带宽

在网上我发现我可以使用

transform:scaleX（-1）进行翻转。但是如何仅在一张背景图像上应用它呢？
演示-

而是使用伪元素
：before
和
：after


标题{
宽度：500px；
高度：50px；
显示：内联块；
}
标题：之前，
标题：之后{
内容：网址(http://placehold.it/50x50)，网址(http://placehold.it/50x50);
显示：块；
浮动：左；
}
标题：之后{
转换：scaleX（-1）；
}
标题ul{
边际：0.50px；
填充：0；
列表样式：无；
}
头李{
浮动：左；
}
标题a{
宽度：100px；
高度：33像素；
填充顶部：17px；
显示：块；
文本对齐：居中；
文字装饰：无；
颜色：#333；
}











欢迎：）如果我的回答对你有帮助，请接受
<header>
    ...
</header>

header {
    ...
    background-image: url(http://placehold.it/50x50), url(http://placehold.it/50x50);
    background-position: top left, top right;
    background-repeat: no-repeat, no-repeat;
}
...