伪元素选择器

来源：互联网发布：windows游戏编辑：程序博客网时间：2024/06/03 17:01

感冒终于有点想好的意思了。。。赶快来学习。。。。我是不是个好孩纸。。。

今天来看伪元素选择器。

伪元素选择器就是给指定的标签内容前面或者后面添加一个子元素。

先设置一个div，其中的内容是抵制萨德

我们的目标是在“抵制萨德”的前面加上一个内容“我爱中国”，在“抵制萨德”的后面也添加一个内容“从我做起”。

那么利用伪元素选择器的代码是：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>伪元素选择器</title>    <style type="text/css">        *{            margin:0;            padding:0;        }        div{            width: 200px;            height: 200px;            background-color: red;        }div::before{     content: "我爱中国";     width: 70px;     height: 30px;     display: block;     background-color: pink; }        div::after{     content: "从我做起";     width: 70px;     height: 30px;     display: block;     background-color: pink; }    </style></head><body><div>    抵制萨德</div></body></html>

由上面的代码可以知道

我们这次学习的伪元素选择器见就是

::before{

content:"";

其他属性: 值;

}

::after{

content:"";

其他属性: 值;

}

0 0