Question

I have a button that uses a graphic and has rounded corners.

In order to make the button CSS reusable, and able to accommodate any length text whilst still keeping the round corners, I’d like to use :after to add the end rounded corner after the main button (thus the first image/text can grow and the rounded corner will always be tacked on the end.)

Managed to get the :after working when I add content (e.g the words ‘test’ and some background colours) but cannot get it to work when there is no content on the styling. I just need the background image and that’s it.

JSFiddle with the buttons. You can see the :after code but for some reason this doesn’t display.

#wizard-nav .paging:after
{ 
background-image:url("http://i.imgur.com/GDJgl.png");
height:22px;
width:7px;
}

Answer 1

When using the ::before and ::after pseudo-selectors you need to set a value to content.

Pseudo elements are also inline elements, so if you want to define a height or width then you must display it as a block element.

For example:

#wizard-nav .paging::after {
    content: "";
    display: block; 
    background-image:url("http://i.imgur.com/GDJgl.png");
    height:22px;
    width:7px;
}

Working example: http://tinkerbin.com/GSO0HpD2