Add text and image through :after

[Mave]

I’m trying to recreate the 4chan admin and moderator titles
Example:

https://i.imgur.com/Ofigl97.png

I already managed to get to this point:

https://i.imgur.com/Hb6BzHI.png

Using

.username–moderator:after{
margin: 0px;
content: “## Mod”;
margin-right: 0px;
margin-left: 5px;
display: inline;
}

How would I add the image icon after the ## Mod text?

[Beverleyh]

Try the background-image property?

[Mave]

Thanks for answering Beverleyh!
I managed to display the image using

background-image: url(“http://s.4cdn.org/image/modicon.gif”); (quick hotlink for now, will rehost the image later)
background-position: right;
background-repeat: no-repeat;

Problem is the image looks like this, how can I display it NEXT to the text?

https://i.imgur.com/XVw2WTm.png

[Beverleyh]

Pad the pseudo element with extra space on the right to create more room? But remember to change the display value too because padding doesn’t apply to inline elements.

[Mave]

Unfortunately changing the display value to something besides inline is not an option..

Is there something I can use to make the ::after content have empty space at the end by using an invisible symbol or something?

Right now using:

content: “## Admin ∙ ∙ ∙”;
background-image: url(http://s.4cdn.org/image/adminicon.gif);
background-repeat: no-repeat;
background-position-x: right;

I can get it to look like this:

https://i.imgur.com/lg3ra6Y.png

Of course I want to get rid of the bullets.

[Beverleyh]

I might be thinking of margin having no effect on inline elements so try padding as already suggested. Otherwise \00a0

Thinking out loud. On mobile.

[Author]

Posts