css - 使用 Sprites 作为链接列表上的图标

Question

我有一个带有常用标记的链接列表

    <ul>
        <li>
            <a href="">a link</a>
        </li>
        <li>
            <a href="">a really long link that wraps
                over two or more lines
            </a>
        </li>
        <li>
            <a href="">a link</a>
        </li>
        <li>
            <a href="">a link</a>
        </li>
    </ul>

我想使用 sprite 在链接左侧显示图标，并让链接文本保持在右侧:

ICON    some text that wraps and
        some more text that wraps

我想在不添加更多标记的情况下执行此操作。而且我必须支持 IE8 - 所以我认为这意味着我不能使用背景大小

我尝试过使用伪元素——将背景添加到伪元素。这是行不通的，因为实际内容不在它自己的元素中——所以似乎没有办法让它不换行在图标下。

我错过了什么吗？有没有办法使这项工作以良好的语义方式进行？还是我必须添加跨度？

Answer 1

看看这个:

li {
    margin-left: 25px; // |n| px must be equal to li a:before margin-left |n| px
    float: left;
    clear: left;
}

li a:before {
    content: ' ';
    margin-left: -25px; // here ...
    width: 25px;
    height: 50px;
    float:left;
    background: url('http://www.google.com/images/srpr/logo3w.png');
}

fiddle :http://jsfiddle.net/vhSG6/6/