Using :after to add a background image but no content

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

Answer 2

You have an alternative for your background-image. You can generate it for example with http://www.colorzilla.com/gradient-editor/ and than applu some border-radius, as much as you like and border, and you have the same effect more quickly than working around a background-image like this. For example:

border:red 1px solid;
border-radius:10px;

And by the way - they didn't appear because of your background-image. Take down your ". http://jsfiddle.net/WZywh/ here is an example