«

伪类选择器

MitSeek 发布于 阅读：34 CSS 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>动态伪类选择器</title>
        <style>
            ul{
                list-style: none;/* 取消项目符号 */

            }
            li:before{
                display: block;
                font-size: 100%;
                color: red;
                background: yellow;
                content: '英语：' url("01.webp");/* 在li前面加字符串 */

            }
            li:after{
                display: block;
                content: url("01.webp");

            }
            a{
                text-decoration: none;/* 取消a标签的下划线 */

            }
        </style>
    </head>

    <body>
        <ul>
            <a href="">英语</a>
            <ul>
                <li>第一课</li>
                <li>第二课</li>
                <li>第三课</li>
                <li>第四课</li>
            </ul>
        </ul>
    </body>
</html>

CSS