CSS伪元素:before和after的用法

before和after的用法

Last Updated on

::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;
}

Last modified: 2019年10月9日

前一篇

CSS学习系列

CSS伪元素:::after的用法

::after的用法:用来创建一个伪元素,作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

...

后一篇

CSS学习系列

CSS伪元素: first-letter和first-line的用法

first-letter和first-line的用法:定义元素中的第一个字符或多行元素的第一行,::first-line 伪元素只能在块容器中,所以,::first-line伪元素只能在一个display值为block, inline-block, table-cell 或者 table-caption中有用.

...