今天，来给大家介绍一下css伪元素。不解释，直接上步骤，一步一步，你很快就会明白伪元素的妙用~
第一步：
<body>
<div class="box"> hi </div>
</body>
这是一个简简单单的div，里面有内容hi。在浏览器查看元素是这样子的：
image.png
第二步：
给div加上css
.box::before{
content: "<";
}
.box::after{
content: ">";
}
那现在我们再去浏览器里查看一下元素:
image.png
这个多出来的::before和::after就是我们所说的伪元素。为什么说他是伪元素呢，我没有写任何标签是吧，但是这个伪元素你可以把它看成类似于span的元素。你可以给他设置display：inline-block，从而给它设置宽高。请看第三步。
第三步：
我现在改一下css,把::before设置为display：block。让我们再给他一个border试试。
.box::before{
content: "<";
display: block;
border: 1px solid red;
}
.box::after{
content: ">";
}
在浏览器里查看元素：
image.png
我们可以看到，它变成了一个块级元素，占了整行。
好的，其实伪元素就到这里了，没有什么别的了。有人可能会问，那这个有什么用？有什么意思？
下面就给大家举个栗子：
大家看到这个太极图了吗？
image.png
只用一个div就能实现。纯div+css：
嗯，你没看错，这就是全部的HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>太极</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="yinyang"></div>
</body>
</html>
css如下：
方法一(这个方法用了三个div，所以，推荐方法二)：
1、找到这个网站
image.png
image.png
image.png
做完上述，会呈现从左向右渐变，我们在50%的地方，断一下，就是鼠标点一下：
image.png
image.png
image.png
这里也可以只复制w3c标准写法。
2、
.yinyang{
width: 200px;
height: 200px;
border-color: black;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 50%;
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 100%);
position: relative;
}
image.png
上面那一步完成后，是这样的圆.
3、
html:
<div class="taiji">
<div class="one"></div>
<div class="two"></div>
</div>
css:
.taiji{
width: 200px;
height: 200px;
border: 1px solid #000;
border-radius: 50%;
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 100%);
position: relative;
}
.taiji::before{
width: 100px;
height: 100px;
border-radius: 50%;
background: #000;
position: absolute;
top: 50px;
}
.taiji::after{
width: 100px;
height: 100px;
border-radius: 50%;
background: #fff;
position: absolute;
top: 50px;
right: 0;
}
这一步完成后，效果如下图：
image.png
至于中间的两个小球，我们依旧可以用上述css gradient去完成它。就不过多赘述。
方法二（推荐）：
html:
<div class="yinyang">
</div>
css:
.yinyang{
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
.yinyang:before{
content: '';
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
.yinyang:after{
content: '';
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius: 100%;
width: 12px;
height: 12px;
}
也可以达到一模一样的效果。而且用的div更少。
伪元素就暂时介绍到这里了。
网友评论