CODEWITHSUNDEEP
htmlcss
originalwill
originalwill

Reputation: 35

Adding an image at the end of a link in CSS

I am working on a project for class, and it asks to make a navigation bar like this:

enter image description here

20px padding between each div, 20px for padding between the box around it etc..

I'm having trouble adding the little arrow image after my text in the links, my code is below, I was given the .png file of the arrow, and everything looks fine before adding the arrow, but once I add the arrow to the a:after line of code at the bottom of this page, it makes everything distorted:

http://i.imgur.com/6242Sk3.png

How do I fix this??

HTML: 

    <div id="left">
            <h2>Pick a Platform!</h2>
            <ul>
                <li><a class="green" href="#">Steam</a></li>
                <li><a class="orange" href="#">iPad</a></li>
                <li><a class="green" href="#">XBox One</a></li>
                <li><a class="orange" href="#">PlayStation 4</a></li>
                <li><a class="lastChild"  href="#">Wii U</a></li>
            </ul>
    </div>

CSS:

#left ul {
    padding-bottom: 20px;
}

#left ul .orange {
    background-color: #DC9B25;
}

#left ul .green {
    background-color: #657761;
}

#left ul li {
    list-style-type: none;
    margin-right: 20px;
    margin-left: -20px;
}

#left ul li a {
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
}

#left ul li a.lastChild {
    border-bottom: transparent;
    background-color: #657761;
}

I researched a bit and found that this is what you use to add an image to the end of a link: 

#left ul li a:after {
    content: url(arrow.png);
}

ADDED JSFiddle CODE LINK: http://jsfiddle.net/502j2qqn/

Upvotes: 0

Views: 2310

Answers (2)

Jaishankar
Jaishankar

Reputation: 168

hi please look for the below link for the answer we can crete arrow using CSS itself

http://jsfiddle.net/jai17/u8v6gr6a/

CSS:

.arrow-right {
     border-bottom: 5px solid rgba(0, 0, 0, 0);
    border-left: 10px solid #ffffff;
    border-top: 5px solid rgba(0, 0, 0, 0);
    float: right;
    height: 0;
    margin-right: 20px;
    margin-top: 7px;
    width: 0;
}

HTML :

<div id="left">
    <h2>Pick a Platform!</h2>
        <ul>
            <li><a class="green" href="#">Steam <div class="arrow-right"></div></a></li>
            <li><a class="orange" href="#">iPad <div class="arrow-right"></div></a></li>
            <li><a class="green" href="#">XBox One <div class="arrow-right"></div></a></li>
            <li><a class="orange" href="#">PlayStation 4 <div class="arrow-right"></div></a></li>
            <li><a class="lastChild"  href="#">Wii U <div class="arrow-right"></div></a></li>
        </ul>
</div>

Upvotes: 0

Bradley
Bradley

Reputation: 490

The biggest problem with using :after is that it is not as cross browser compatible as using tradional background. Your code will work, the :after Pseudo element just needs to be styled appropriately, but your also adding more elements to the DOM using this, which increases load time and is really just unnecessary.

Change the css for this selector what I have below and delete the #left ul li a:after selector

#left ul li a {
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    background: url('http://i.imgur.com/ERt02Jx.png') no-repeat center right;
}

Upvotes: 3

Related Questions