Question

I’m creating a horizontal menu and to smooth out the corners on the left and right side of the menu I have a couple of images that I use. The menu itself has a background color.
On the last element I would like to place the right-image.png to appear just after the element itself. It works perfectly if I add the image as a new element, but since this really is just an styling issue I would like to leave the markup as it is and only style it using css.
It is probably easy, but I can’t get it to work.
This is how the last element should look:

So basically I’d like to add the image AFTER all elements without using markup. Is this possible?

Answer 1

element:after {
    position: absolute;
    right: 0;
    width: 50px; height: 50px; /* width and height set as dimensions of image */
    content: url(../images/bg.jpg);
}