Position icon added with :after

HTML & CSS
1

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?

Thanks!

2

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.

3

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

4

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?

5

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:

6

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

7

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
8

Exactly what I wanted, thank you very much!

9

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

1 Like
10

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