Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Add text and image through :after

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #277396
    Mave
    Participant

    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?

    #277397
    Beverleyh
    Participant

    Try the background-image property?

    #277398
    Mave
    Participant

    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

    #277444
    Beverleyh
    Participant

    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.

    #277447
    Mave
    Participant

    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.

    #277448
    Beverleyh
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.