感冒终于有点想好的意思了。。。赶快来学习。。。。我是不是个好孩纸。。。
今天来看伪元素选择器。
伪元素选择器就是给指定的标签内容前面或者后面添加一个子元素。
先设置一个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:"";
其他属性: 值;
}