伪元素：：before和：：after的详细介绍
㈠什么是伪元素？
不同的解释：
⑴伪元素是创造关于⽂档语⾔能够指定的⽂档树之外的抽象。例如⽂档语⾔不能提供访问元素内容第⼀字或者第⼀⾏的机制。伪元素允许设计师引⽤它们，否则这是难以办到的。伪元素还提供样式设计师给在源⽂档中不存在的内容分配样式（例如：:before和:after能够访问产⽣的内容）。
⑵CSS 在渲染⽂档的时候，伪元素可以通过 css 给 HTML 添加⼀个元素（叫标签也⾏），这个元素在⽂档树中是不到的。伪元素被当做CSS 的样式来进⾏展现，⽤法和普通的元素⽤法是⼀样的。
⑶伪元素⽤于创建⼀些不在⽂档树中的元素，并为其添加样式。⽐如说，我们可以通过:before来在⼀个元素前增加⼀些⽂本，并为这些⽂本添加样式。虽然⽤户可以看到这些⽂本，但是这些⽂本实际上不在⽂档树中。
⑷CSS伪元素是⽤来添加⼀些选择器的特殊效果。
㈡：：before 和：：after的定义
⑴::before 创建⼀个伪元素，作为已选中元素的第⼀个⼦元素，常通过 content 属性来为⼀个元素添加修饰性的内容。
⑵::after 创建⼀个伪元素，作为已选中元素的最后⼀个⼦元素，常通过 content 属性来为⼀个元素添加修饰性的内容。
㈢语法
/* CSS3 语法 */
element::before { 样式 }
/* （单冒号）CSS2 */
element:before  { 样式 }
㈣⽤法
⑴标准写法是双冒号（但考虑兼容性也有⼈写单冒号）
⑵::before和::after在被选中元素⾥⾯、元素现有内容之前（后）插⼊内容，需要使⽤content属性指定
要插⼊的内容。content必须有值（空值也⾏）。
⑶content插⼊的内容默认是 inline 元素，可以通过display:block改变。
㈤content属性
⑴::before和::after必须配合content属性来使⽤，content⽤来定义插⼊的内容，content必须有值，⾄少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显⽰。
⑵content取值
①string
使⽤引号包⼀段字符串，将会向元素内容中添加字符串。如：a:after{content:""}
⽰例如下：引号括起来的⼀段字符串，显⽰到当前元素的前后:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
p::before{
content: "《";
color: blue;
}
p::after{
content: "》";
color: blue;
}
</style>
</head>
<body>
<p>javascript⾼级程序设计</p>
</body>
</html>
效果图：
②attr()
通过attr()调⽤当前元素的属性，⽐如将图⽚alt提⽰⽂字或者链接的href地址显⽰出来。⽰例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
a::after{
content: "(" attr(href) ")";
}
</style>
</head>
<body>
<a href="wwwblogs/shihaiying/">博客地址</a>
</body>
</html>
效果图：
③url()/uri()
⽤于引⽤媒体⽂件。
举例：“百度”前⾯给出⼀张图⽚，后⾯给出href属性。
div border属性<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
a::before{
content: url("www.baidu/img/baidu_jgylogo3.gif");
}
a::after{
content:"("attr(href)")";
}
a{
text-decoration: none;
}
</style>
</head>
<a href="www.baidu">百度</a>
</body>
</html>
效果图：
④counter()
调⽤计数器，可以不使⽤列表元素实现序号功能。
配合counter-increment和counter-reset属性使⽤
⽰例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h2 {
counter-reset: subsection;
}
h1:before {
counter-increment: section;
content: counter(section) "、";
}
h2:before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) "、";
}
h3:before {
counter-increment: subsection;
content: counter(section) "." counter(section) "."counter(subsection) "、";
}
</style>
</head>
<body>
<h1>⼤标题</h1>
<h2> ⼆副</h2>
<h2> ⼆副</h2>
<h2> ⼆副</h2>
<h3> &emsp；三副</h3>
<h3> &emsp；三副</h3>
<h3> &emsp；三副</h3>
</body>
</html>
效果图：
⑶content运⽤
①清除浮动
清除浮动⽅法有多种，现在最常⽤的就是下⾯这种⽅法，仅需要以下样式即可在元素尾部⾃动清除浮动
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
②float：居中
我们知道float没有center这个取值，但是可以通过伪类来模拟实现。
这个效果实现很有意思，左右通过::before float各⾃留出⼀半图⽚的位置，再把图⽚绝对定位上去。
③做出各种图形效果
案例：六芒星
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six::after{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
</style>
<body>
<div id="star-six"></div>
</body>
</html>
效果图：
★解释：star-six的div是⼀个正三⾓⾏，#star-six::after是⼀个倒三⾓形，通过绝对定位，调整其位置即可实现六⾓星的效果。
④不使⽤图⽚创建⼩图标
举例：⽐如⼀个电话
很巧妙的应⽤⼀个div左border加圆⾓当机⾝，::before和::after配合圆⾓当听筒。⽰例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
#phone{
width:50px;
height:50px;
border-left:6px solid #EEB422;
border-radius:20%;
transform:rotate(-30deg);
-webkit-transform:rotate(-30deg);
margin:20px;
margin-right:0px;
position:relative;
display: inline-block;
top: -5px;
}
#phone:before{
width:15px;
height:15px;
background:#EEB422;
border-radius: 20%;
content: "";
position: absolute;
left:-2px;
top: 1px;
}
#phone:after{
width:15px;
height:15px;
background:#EEB422;
border-radius: 20%;
content: "";
position: absolute;
left:-3px;
top: 34px;
}
</style>
</head>
<body>
<div id="wraper">
<div id="phone"></div>
</div>
</body>
</html>
效果图：
⑤显⽰打印⽹页的URL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@media print {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。