CSS 精灵图像无法正确显示文本

Question

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

a[href$='.pdf'] { 
padding-left: 68px;
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  */
}

请大家帮忙

Answer 1

尝试：

a[href$='.pdf']{
    display:inline-block;    
}

并使用 ::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 */
}

可在此处找到示例：JSFIDDLE

CSS 精灵图像无法正确显示文本

CSS sprites image not showing properly with text

html

css

sprite