CSS - change width of :after elements using content?

Question

This is my 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>

and this is my 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;
}

In the CSS I set width of the images to 43px but it does not work. The images just appear their regular image size. I even tried using

background-size: 43px;

and that didn't work either. I found this: Can I change the height of an image in CSS :before/:after pseudo-elements?

but it requires me to change

content

to

background-image

but I don't want to do that because background-image was giving my cross browser issues (if I remember correctly, it wasn't showing up correctly on IE.

How do I change the width of the :after element which links to an image using 'content'?

Background-image property http://caniuse.com/#search=background-size I think this is quite enough ie 8+ — CroaToa, Aug 03 '14 at 17:56
@CroaToa hm what do you mean by "I think this is wuite enough ie 8+"? — SilentDev, Aug 03 '14 at 18:02
I meant that background-image do not support browsers which have very few users — CroaToa, Aug 03 '14 at 18:06
@CroaToa thing is, the app I am creating is for a few workplaces and the workplaces still use IE8 — SilentDev, Aug 04 '14 at 06:49

score 1 · Answer 1 · answered Aug 03 '14 at 18:03

1

You can set overflow: hidden; to ::after and write width and height.

See JsFiddle DEMO

answered Aug 03 '14 at 18:03

CroaToa

900
2
14
36

hm that ends up cropping the large image rather than actually changing the images width. – SilentDev Aug 04 '14 at 07:11

CSS - change width of :after elements using content?

1 Answers1