css----伪元素

::before
::after
均为创建伪元素的方法

：：before

通过 content 属性来为一个元素添加修饰性的内容，行内元素

如：

<style>
	a::before{ /*超链接前面添加修饰, 修饰内容属于超链接的一部分*/
       content: "♥";
   }
</style>
	<a href="#" target="_blank" rel="noopener noreferrer">超链接</a>

语法：
/* CSS3 语法 */
element::before { 样式 }

示例

<style>
        .d1{
            background-color: pink;
            opacity:.5;
            text-align: center;
        }
        .d1::before{ /*超链接前面添加修饰, 修饰内容属于超链接的一部分*/
            content: "<<";
            color:blue;
            font-size: 1em;
        }
        .d1::after{
            content:">>";
            color:red;
            font-size: 1em;
        }

        .d2{
            background-color: blue;
            opacity:.5;
            text-align: center;
            color:red;
        }

    </style>
    <div class="d1">模块1</div>
    <div class="d2">模块2</div>

效果

2. 使用伪元素来创建一个待办列表

<style>
		body{
            margin:0;
            padding:0;
        }
        ul{
            list-style-type: none;
            margin:0 auto;
            padding:0;
        }
        ul li{
            position: relative;
            background-color: lightgrey;
            margin:2px;
            padding: 0.5em 0.5em 0.5em 2em;
        }

        /* 对勾修饰符号 */
        .test{
            background-color:#CCFF99;
        }
        .test::before{
            position: absolute;
            content:"";
            border-style: solid;
            border-color: red;
            border-width:0 0.3em 0.25em 0;
            height: 1em;
            top: 1.3em;
            left: 0.6em;
            margin-top:-1em;
            width:.5em;
            transform:rotate(45deg);

        }

    </style>
    <script>
        window.onload = function(){
            var li = document.getElementsByTagName("li");
            console.log(li);
            for(var i=0;i<li.length;i++){

                //对象自己增加时间监听
                li[i].addEventListener("click",function(event){ //触发click事件，执行function

                    console.log(event); //传进来的对象是事件
                    //event.target 触发事件的元素对象
                    //this 触发事件的元素对象
                    event.target.classList.toggle("test"); //增加类属性
                });
            }
        
        }

	//element.removeEventListener("click",function(){})
    </script>
    <ul> 
        <li>代办事项1</li>
        <li>代办事项2</li>
        <li>代办事项3</li>
    </ul>

 
 
 
 
上一篇：html之 object 标签    下一篇：
ttiantian