Add link to CSS image

Question

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;
}

What is your output? How does it differ from what you expect? — Patrick Collins
– Patrick Collins, Commented May 31, 2015 at 18:13
you need to aply your :after to <a> element, not <li>: .header nav ul li a:after { ... } — Yukulélé
– Yukulélé, 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> — Khurram Sharif
– Khurram Sharif, Commented May 31, 2015 at 18:15
@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. — transistor09
– transistor09, Commented May 31, 2015 at 18:19

Akhilesh Kumar · Accepted Answer · 2015-05-31 18:21:18Z

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.

answered May 31, 2015 at 18:21

Akhilesh Kumar

9,37513 gold badges61 silver badges97 bronze badges

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

Comments

user4942732 · Accepted Answer · 2015-05-31 18:18:15Z

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.

answered May 31, 2015 at 18:18

user4942732

Comments

Yukulélé · Accepted Answer · 2015-05-31 18:21:55Z

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

answered May 31, 2015 at 18:21

Yukulélé

17.4k12 gold badges78 silver badges105 bronze badges

3 Comments

Felipe Lopez Over a year ago

and is it possible to change the image from been before the text that way? I had on on the li because of that.

Yukulélé Over a year ago

try :before instead of :after

Felipe Lopez Over a year ago

Thank you very much, I had done that, but I had not changed the float on the CSS. Again thank you!

Friendly Crook · Accepted Answer · 2015-06-01 06:38:05Z

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

answered Jun 1, 2015 at 6:38

Friendly Crook

1,1981 gold badge11 silver badges14 bronze badges

Collectives™ on Stack Overflow

Add link to CSS image

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related