Html CSS精灵图像不能正确显示文本

我使用以下CSS通过CSS图像精灵显示图像作为背景图像。图像是根据文件扩展名显示的，但href/link文本不是一行显示，而是分成两行

a[href$='.pdf']{
左侧填充：68px；
背景：透明url（/images/icons.png）不重复；
显示：内联块；/*将图标显示为内联块*/
宽度：44px；/*图标宽度*/
高度：48px；/*图标高度*/
背景位置：0-100px；/*中的图标背景位置*/
}

试试：

并使用：：before选择器在href前面生成一个图标

a[href$='.pdf']::before{
content: ''; /* content property must be added */
background: transparent url(/images/icons.png)  no-repeat;
 display: inline-block; /* Display icon as inline block */
    width: 44px; /* Icon width */
    height: 48px; /* Icon height */
    background-position: 0 -100px; /* Icon background position in  */
    margin-right:50px; /* use margin instead of padding */
}

---

这里可以找到一个例子：

关于您的问题的演示？只是看到这个css，我们无法修复。

a[href$='.pdf']::before{
content: ''; /* content property must be added */
background: transparent url(/images/icons.png)  no-repeat;
 display: inline-block; /* Display icon as inline block */
    width: 44px; /* Icon width */
    height: 48px; /* Icon height */
    background-position: 0 -100px; /* Icon background position in  */
    margin-right:50px; /* use margin instead of padding */
}