Mave

# October 9, 2018 at 12:43 pm

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

View post on imgur.com

I already managed to get to this point:

View post on imgur.com

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

# October 9, 2018 at 1:03 pm

Try the background-image property?

Mave

# October 9, 2018 at 1:31 pm

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?

View post on imgur.com

Beverleyh

# October 9, 2018 at 9:41 pm

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

# October 10, 2018 at 4:15 am

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:

View post on imgur.com

Of course I want to get rid of the bullets.

Beverleyh

# October 10, 2018 at 4:45 am

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.