css中：：before：：after的⽤法
⼀、介绍
::before和::after是伪元素，（css3中为了与伪类做区别，伪元素采⽤双冒号的写法；但因为兼容性的问题，所以现在⼤部分还是统⼀的单冒号，⽐如:first-line、:first-letter、:before、:after等，但新的在CSS3中引⼊的伪元素就不允许⽤单冒号的写法。）
“:before” 伪元素可以在元素的内容前⾯插⼊新内容。
“:after” 伪元素可以在元素的内容之后插⼊新内容。
::before或::after都必须和content属性结合使⽤，content不能没有，内容⾄少为空；伪元素的display默认为inline，可以⾃⼰改.
⼆、⽤法
1.利⽤content的值：
（1）content：“字符串”；
可以统⼀在字前⾯或后⾯加⼀些字符
p:after{~~删除线格式~~
content:":";
}
<body>
<p>请输⼊姓名</p>
<p>请输⼊年龄</p>
<p>请输⼊性别</p>
</body>
(2)content:url(…)
可以在字前⾯加⼀些⼩的图标，通过定位把位置调合适
p::before{
content:url(footer3.png);
position: relative;
top:17px;
}
<body>
<p></p>
</body>
(3)通过attr()属性调⽤当元素的属性，⽐如将图⽚alt提⽰⽂字或者链接的href地址显⽰出来。
attr() 函数返回选择元素的属性值。
content:"("attr(href)")";
}
p:after{
content:attr(class);
}
<p><a href="wx.qq/"></a></p> <p class="hello"></p>
2.实现三⾓形
#top-triangle{
width:0px;
height:0px;
border:20px solid transparent;
border-bottom:20px solid pink;
}
#right-triangle{
width:0px;
height:0px;
border:20px solid transparent;
border-left:20px solid pink;
}
#bottom-triangle{
width:0px;
height:0px;
border:20px solid transparent;
border-top:20px solid pink;
}
#left-triangle{
width:0px;
height:0px;
border:20px solid transparent;
border-right:20px solid pink;
}
<body>
<div id="top-triangle"></div>
<p></p>
<div id="bottom-triangle"></div>
<div id="right-triangle"></div>
<div id="left-triangle"></div>
</body>
3.实现对话框效果：
position: relative;/*后⾯移动会盒⼦位置*/ display: table;
min-height: 40px;
text-align: center;
background-color: #9EEA6A;
margin: 0;
border-radius: 7px;
}
.left{
left:10px;
}
.left::before,.right::after{
position: absolute;
display: inline-block;
content:"";
width: 0px;
height: 0px;
border: 8px solid transparent;
top: 15px;/*移到中间*/
}
.left::before{
border-right-color: #9EEA6A;
left: -16px;
}
.right::after{
border-left-color: #9EEA6A;
right: -16px;
}
.left p,.right p{
padding:0px 10px;
}
.right{
right:-150px;
}
<div class="left">
<p>你好啊</p>
</div>
<div class="right">
<p>好久不见~</p>
</div>
4.实现箭头
.box{
position: relative;
width: 200px;
height: 50px;
background-color: pink;
}
.box::before{
position: absolute;
content:"";
width: 12px;
height: 12px;
border: 1px solid black;
border-bottom-color: transparent;
border-right-color: transparent;
transform:translate(-50%, -50%)rotate(-45deg);
left: 20px;
top: 50%;
}cssclass属性
<body>
<div class="box"></div>
</body>
5.清除浮动
原理：利⽤:after和:before在元素内部插⼊两个元素块，从⽽达到清除浮动的效果。
.outer:after{
clear:both;/*清除浮动*/
content:'';
display:block;/*显⽰伪元素*/
width:0;
height:0;/*不占位置*/
visibility:hidden;/*允许浏览器渲染它，但是不显⽰出来*/
}
6.画分割线：画⼀条分割线
<style>
*{
padding: 0;
margin: 0;
}
.spliter::before, .spliter::after{
content:'';
display: inline-block;
border-top: 1px solid black;
width: 200px;
margin: 5px;
}
</style>
</head>
<body>
<p class="spliter">分割线</p>
</body>

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