Question

我正在尝试使用CSS中的伪元素创建自定义列表。

当我添加这个＆＃34;位置：绝对;上：6px;左：0px;＆＃34;，我箭头的图像完全消失。当我删除上面的代码行时，我的箭头图像显示在每个列表项的文本上方。

我希望自定义箭头显示在每个列表项的下一个旁边。我该如何解决这个问题？

这是我的代码。

  <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>My Web Page</title>
        <style type="text/css">
            body { font-family: Arial; font-size: 16px; background-color: #f8e6ae; color: #888; }
            .page { background-color: #fff; padding: 20px 30px 30px 50px; margin: 100px; }
            .page h1 {
                color: #fff;
                font-size: 1.3em; font-weight: normal;
                text-transform: uppercase;
                background-color: #d60000; 
                position: relative;
                margin: 0px -70px 20px -50px;
                padding: 18px 0px 16px 50px;


            }

            .page h1:after {
                content: '';
                display: block; height: 40px; width: 40px;
                background: url(images/fold.gif) no-repeat 0 0; 
                position: absolute; right: 0px; bottom: -40px;



            }


            .page p { line-height: 1.2em; }
            .page a { color: #1badd2; text-decoration: none; }
            .page ul { margin: 0;  padding:0; }

            .page li { display: block; position: relative; 
                    padding: 2px 0px 8px 35px;
                }
            .page li:before {
                content: '';
                display: block;
                background: url(images/arrow.png) no-repeat 0 0;
                height: 12px; width 30px;
                position: absolute; top: 6px; left: 0px;
                background-size: 20px 8px;
                }




        </style>
    </head>
    <body>
        <div class="page">

            <h1>My Web Page</h1>

            <p>Lorem ipsum dolor sit amet consectetur adi pisicing elit sed do eiusmod tempor incid idunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer citation ull amco laboris nisi ut aliquip ex ea commodo consequat elit sed do.</p>

            <ul>
                <li><a href="http://goo.gl/4mkQQH">Automating Web Graphics</a></li>
                <li><a href="http://goo.gl/jc62NJ">Slice Tool</a></li>
                <li><a href="http://goo.gl/WzAb1X">Smart Objects</a></li>
                <li><a href="http://goo.gl/6SwVuo">Layer Comps</a></li>
            </ul>
        </div>
    </body>
</html>

.

Answer 1

我在前一行代码中缺少一个冒号作为width属性。

使用伪元素重新定义无序列表

1 个答案: