This topic contains 5 replies, has 2 voices, and was last updated by Beverleyh 4 months, 1 week ago.
-
AuthorPosts
-
October 9, 2018 at 12:43 pm #277396
I’m trying to recreate the 4chan admin and moderator titles
Example:I already managed to get to this point:
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?
October 9, 2018 at 1:03 pm #277397Try the
background-image
property?October 9, 2018 at 1:31 pm #277398Thanks for answering Beverleyh!
I managed to display the image usingbackground-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?
October 9, 2018 at 9:41 pm #277444Pad 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.
October 10, 2018 at 4:15 am #277447Unfortunately 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:
Of course I want to get rid of the bullets.
October 10, 2018 at 4:45 am #277448I might be thinking of margin having no effect on inline elements so try padding as already suggested. Otherwise
\00a0
Thinking out loud. On mobile.
-
AuthorPosts
You must be logged in to reply to this topic.