最新消息:周一至周五21:30分QQ群(161510483)直播,零基础免费学谷歌SEO,WEB前端,PHP入门教程

CSS伪元素:before和after的用法

CSS学习系列 林雍岷 176浏览

::before和::after CSS伪元素:生成的伪元素包含在元素格式框内, 因此不能应用在替换元素上, 比如img或br元素,使用:: before和:: after伪元素来创建一些意想不到的效果。::before和::after在被选中元素里面、元素现有内容之前(后)插入内容,需要使用content属性指定要插入的内容。content必须有值(空值也行)。content插入的内容默认是 inline 元素,可以通过display:block改变。

1、div.bubble>会话框

2、.bubble{
color:white;
background-color:#777;

padding:60px;
width:200px;
margin:0 auto;
text-align:center;

border-radius:40px;
position:relative;
background-image:linear-gradient(0deg,#777,#aaa);
}

3、.bubble::before{
content:””;

display:block;/*添加absolute要删除*/
width:60px;
height:60px;
background-color:red;/*修改为:#777
border-radius:100px;
position:absolute;
bottom:-30px;
left:40px;
z-index:-10;
}

4、.bubble::after{
content:””;
width:60px;
height:60px;
background-color:green;/*修改为:white
border-radius:100px;
position:absolute;
bottom:-40px;
left:60px;
z-index:-5;
}

转载请注明:林雍岷 » CSS伪元素:before和after的用法