Position icon added with :after

Hey guys,

I’m creating a navigation menu and I want arrow icons to indicate that it’s a dropdown menu item. I’ve succeeded in doing it with adding this CSS:

ul li:after { 
content: url("../assets/images/arrow.png");
margin-left: 5px; }

However, the arrow should be moved down a little. Margin-top doesn’t work here. What else can I try?

Also, the image of the arrow isn’t really of good quality. It’s a 15x15 png with a vector and 300 pixels/inch. How can I improve the image quality?


A URL to your test page would help a lot. Otherwise, you could create a codepen that contains the code and image you are using.

Yes, I was thinking it might be possible to apply a “top” value, but without seeing more than the image can only guess.

If quality in a raster image is not there in the first place, there is usually not a lot you can do to improve it. Assuming the icon is not too complex, it may be worth re-creating at a better quality. Perhaps an SVG may be good?

Thanks for the replies guys, appreciate it!
I created a simplified version of what I’m trying to do in Codepen

Will try and see how an SVG turns out, Sam :slight_smile:

I’ve exported the vector as an SVG in Illustrator, but i’m afraid it doesn’t really improve the image quality.

You need to set the position of the content (icon) to absolute for the top: positioning to take effect.
Here I added that and changed it to top: 10px;

1 Like

Exactly what I wanted, thank you very much!

FYI it’s best to just set background images instead of content images. Much easier to control with overall.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.