- This topic is empty.
-
AuthorPosts
-
August 1, 2011 at 10:43 am #33738
Nigel
MemberI 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 #84304jamygolden
MemberThe ‘content’ property is required.
Do this:
div:after{content: '';}
August 1, 2011 at 11:05 am #84305shazdeh
MemberI 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 #84310Chris Coyier
KeymasterEmpty value is fine.
August 1, 2011 at 3:59 pm #84318Nigel
MemberSadly 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 #84331joshuanhibbert
MemberDoes 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 #84352Nigel
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 #84336jamygolden
MemberDo 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 #84356Nigel
MemberThis 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 #84362OniLinkCR
MemberYou 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 #84381jamygolden
MemberYou 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 #282275Manoj Sharma
ParticipantI 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;
} -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.