Forums

Give help. Get help.

  • # 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?

    # October 9, 2018 at 1:03 pm

    Try the background-image property?

    # 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

    # 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.

    # 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.

    # 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.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag