css中的before和after的作用

最新推荐文章于 2024-07-11 21:11:19 发布

liying123466

最新推荐文章于 2024-07-11 21:11:19 发布

阅读量533

点赞数 1

（1）before 是一个伪元素，就是在某个元素之前加入某些内容

（2）after 是一个伪元素，就是在某个元素之后加入某些内容

**********下面利用的就是before和after做出来对话框的效果（就是你手机QQ上面的对话框的效果）*************

<!DOCTYPE html>
<html>
<head>
<title>css利用before和after做出来的对话框的效果</title>
<style type="text/css">
.test-div{
position: relative; /*日常相对定位*/
width:150px;
height: 36px;
border:1px solid black;
border-radius:5px;
background: rgba(245,245,245,1)
}
.test-div:before,.test-div:after{
content: ""; /*:before和:after必带技能，重要性为满5颗星*/
display: block;
position: absolute; /*日常绝对定位*/
top:8px;
width: 0;
height: 0;
border:6px solid transparent;
}
.test-div:before{
left:-11px;
border-right-color: rgba(245,245,245,1);
z-index:1
}
.test-div:after{
left:-12px;
border-right-color: rgba(0,0,0,1);
z-index: 0
}
</style>

</head>
<body>
<div class="test-div"></div>
</body>
</html>