伪元素天生存在于任意元素里面,任意元素里面有两个特殊的伪元素,一个叫before一个叫after。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
<title></title>
</head>
<body>
<span>123</span>
</body>
</html>
span::before{
content: "456";
}
span::after{
}
伪元素就是这么来写,中间有两个冒号,你不小心写了一个冒号也会给你当成伪元素来处理,
针对伪元素必须有的是content,比如上面content: "456";,在页面中就会体现出来,而且456是伪元素的内容而且456还属于span。
为什么叫伪元素,是因为他的元素结构是存在的,但是他又没有写在HTML里面,他可以被css操作,但是他没有元素结构。
after也同理。
伪元素天生就存在,我们只不过是通过css把他选中(不是创造),并且进行修改。
Content只能用在伪元素里面,用在其他元素里面不好使。
因为伪元素没有一个确切的结构,你很难通过html形式往里面去加内容,所以你之能通过css的content属性往里面加内容。即使你伪元素里面啥也不写,你也得把content加上(content: "";)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
span::before{
content: "";
width: 100px;
height: 100px;
background-color: red;
}
</style>
<title></title>
</head>
<body>
<span>123</span>
</body>
</html>
我现在给伪元素加个宽加个高,你看他会有吗?
- 没有!!
为什么?
因为伪元素是行级元素,他天生是illine的,咱们给他改成inline-block就可以了。
他可以当成正常元素来使用,一个在逻辑之前,一个在逻辑之后,可以进行定位……