How can I add an image of a cart in my navigation using only css?

Question

I'd like to add an image of a cart next to my cart item in my navigation bar. Is there any way of doing this using only css? I thought maybe a :after {} somewhere would work.

Here is the link to my site: http://poloniafoods.weebly.com/store/c1/Featured_Products.html

Thanks in advance, Justin.

Answer 1

You can add an after tag to the cart li element. Use content with a url to point to an absolut path of an image. Play with the size and positioning depending on your desired outcome.

.wsite-nav-cart:after {
    content: url('http://placehold.it/50');
    position: absolute;
    right: 0;
    top: 0;
    height: 10px;
    width: 10px;
}