Forums

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

Home › Forums › CSS › Image with :after issue

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • August 1, 2011 at 10:43 am #33738
    Nigel
    Member

    I have a background image using :after but it wont appear unless I use content to add text. Is there another way?

    August 1, 2011 at 10:51 am #84304
    jamygolden
    Member

    The ‘content’ property is required.

    Do this:

    div:after{content: '';}
    August 1, 2011 at 11:05 am #84305
    shazdeh
    Member

    I don’t remember why, but I read somewhere that content: "020"; is better. Does anyone has any info on this?

    August 1, 2011 at 1:28 pm #84310
    Chris Coyier
    Keymaster

    Empty value is fine.

    August 1, 2011 at 3:59 pm #84318
    Nigel
    Member

    Sadly your suggest are not working. I also noticed something else while working on it. The image gets cut off even though it has plenty of room. All my code over the weekend was going so smoothly too :/

    August 1, 2011 at 6:37 pm #84331
    joshuanhibbert
    Member

    Does it have a defined height and width? Please post some code so that we can further assist you.

    August 2, 2011 at 11:27 am #84352
    Nigel
    Member
    #nav li:after{
    
background : url(../images/bon-end.png) no-repeat;
    
content : "";
    
}

    The li tag already has a defined height and width. I tried setting a height/width in the after but it did nothing.

    August 2, 2011 at 12:23 pm #84336
    jamygolden
    Member

    Do this:

    #nav li:after{
    
content : url(../images/bon-end.png);
    
}

    If you want to specifically use the background property, you will have to set a width and height to the pseudo element the same way you’d have to set it on a normal element.

    August 2, 2011 at 3:54 pm #84356
    Nigel
    Member

    This works(thanks!) but it adds two. I used chrome to inspect the element and it adds an extra LI tag after the first one so now it will draw two images instead of one. The only fallback I know is to hard code a navigation with images but that’s not very good :/

    August 2, 2011 at 6:06 pm #84362
    OniLinkCR
    Member

    You need to declare the LI as relative and then use the after as absolute and use positioning to place it.


    

    
#nav  li {position:relative;}
    

    
#nav li:after {position:absolute; content:''; top:yourvalies; left:yourvalues; background:"url" height:"valeue"; width:"value";
    August 3, 2011 at 1:26 am #84381
    jamygolden
    Member

    You don’t necessarily need to need to declare it as absolute. If it’s adding a new li in firebug, I’d bet it’s got to do with your markup. Try validating the page.

    Also, is there a reason you are avoiding background images?

    February 5, 2019 at 7:00 am #282275
    Manoj Sharma
    Participant

    I have just applied this CSS and its done

    #nav li:after{ content: ”;
    height: 30px;
    width: 30px;
    background: url(../images/thumb-pin.png) no-repeat;
    position: absolute;
    margin-left: -10px;
    background-size: 21px;
    margin-top: 6px;
    }

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.