1

I am having some problems trying to add a link to the css image that is after every link, the text itself works but not the image to the right of it, how can I fix it? Thanks.

<nav>
    <!-- top menu -->
    <ul>
        <li><a href="index.html">Home</a></li>  
        <li><a href="materials_list.html">Materials</a></li>
        <li><a href="screened_Loam.html">Screened Loam/Topsoil</a></li>
        <li><a href="RAP.html">RAP</a></li>
        <li><a href="asphalt.html">Asphalt/Concrete Disposals</a></li>
        <li><a href="delivery.html">Delivery</a></li>
        <li><a href="contact_us.html">Contact</a></li>
    </ul>
    <!-- /top menu -->
</nav>

.header nav ul li:after {
    content:'';
    background:url(../images/sprite.png) 6px 7px no-repeat;
    float:left;
    display:block;
    width:12px;
    height:12px;
}
4
  • What is your output? How does it differ from what you expect? Commented May 31, 2015 at 18:13
  • 2
    you need to aply your :after to <a> element, not <li>: .header nav ul li a:after { ... } Commented May 31, 2015 at 18:14
  • Use this <li><a href="index.html"><img src="image url....." height="xxx px" width="XXX px"></a></li> Commented May 31, 2015 at 18:15
  • 1
    @Yukulélé is right. He should add it as an answer. Also, just to point out, you can't add a link to an CSS content, but you can add CSS content to a link. Commented May 31, 2015 at 18:19

4 Answers 4

2

your after tag is not apanding to the inner of a tag.

you need to aply your

:after to <a> element, not <li>: 
.header nav ul li a:after { ... } 

so that your image can be inside a tag and your link will work properly.

Sign up to request clarification or add additional context in comments.

Comments

2

take this for an example:

<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='style.css'/>
    <script src='script.js'></script>
</head>
<body>
    <a href='http://www.google.com'>
        <img src='http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg'>

    </a>
</body>
</html>

Basically put your link, then put the img inside of it. Then you could give it a class or id to resize it, move it, etc.

Comments

2

you need to apply your :after to <a> element, not <li>

.header nav ul li a:after {
    background-image:url( ... );
}

in this way, the image is inside the link

3 Comments

and is it possible to change the image from been before the text that way? I had on on the li because of that.
try :before instead of :after
Thank you very much, I had done that, but I had not changed the float on the CSS. Again thank you!
1

you're missing an a selector in your CSS:

.header nav ul li a:after {
    background:url(../images/sprite.png) 6px 7px no-repeat;
    float:left;
    display:block;
    width:12px;
    height:12px;
}

without the a you would be targeting only the li directly

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.