html - 在 CSS 中的链接末尾添加图像

Question

我正在做一个类元素，它要求制作这样的导航栏:

每个 div 之间的间距为 20px，周围框之间的间距为 20px 等。

我在链接中的文本后添加小箭头图像时遇到问题，我的代码在下面，我得到了箭头的 .png 文件，在添加箭头之前一切看起来都很好，但是一旦我添加了箭头指向本页底部的 a:after 代码行，它使一切都扭曲了:

我该如何解决这个问题？？

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

我研究了一下，发现这是用来在链接末尾添加图像的方法:

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

添加了 JSFiddle 代码链接:http://jsfiddle.net/502j2qqn/

Answer 1

使用 :after 的最大问题是它不像使用传统背景那样跨浏览器兼容。您的代码可以工作，只需要适本地设置 :after 伪元素的样式，但是您还可以使用它向 DOM 添加更多元素，这会增加加载时间并且实际上是不必要的。

更改此选择器的 css，然后删除 #left ul li a:after 选择器

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