Question

这是我的HTML：

    <table id='headerBar'>
        <tr>
        <td class='headerBarActualTd'><a href='/' class='headerBarIconLink'></a><a href='/' id='homeIcon'></a></td>
        <td class='headerBarSpacingTd'></td>
        <td class='headerBarActualTd'><a href='/{{ user.username }}/' class='headerBarIconLink'></a><a href='/{{ user.username }}/' id='myProfileIcon'></a></td>
        <td class='headerBarSpacingTd'></td>
        <td class='headerBarActualTd'><a href='/settings/settingsPage/' class='headerBarIconLink'></a><a href='/' id='settingsIcon'></a></td>
        </tr>
    </table>

这是我的CSS：

#settingsIcon::after {
    content:url('soase.png');
    position: relative;
    width: 43px;
}


#homeIcon:after {
    content:url('soase.png');
    position: relative;
     width: 43px;
}

#myProfileIcon:after {
    content:url('soase.png');
    position: relative;
    width: 43px;
}

在CSS中我将图像的宽度设置为43px，但它不起作用。图像只显示其常规图像大小。我甚至尝试过使用

background-size: 43px;

这也不起作用。我找到了这个： Can I change the height of an image in CSS :before/:after pseudo-elements?

但它要求我改变

content

到

background-image

但我不想这样做，因为背景图片给我的跨浏览器问题（如果我没记错的话，它在IE上没有正确显示。

如何更改使用'content'链接到图像的：after元素的宽度？

Answer 1

您可以将overflow: hidden;设置为:: after并写入宽度和高度。

请参阅JsFiddle DEMO

CSS - 改变宽度：使用内容后的元素？

1 个答案: