CSS伪元素:before和after的用法

CSS教程

before和after的用法

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

接近10年的互联网从业经验,精通Scrum敏捷软件开发的方法,从事互联网产品设计,开发,测试,运营,案例不少于20个,发现自己最喜欢的工作是做外贸营销,外贸SEO,特别喜欢谷歌优化。从2017年3月开始坚持在群161510483直播谷歌SEO和WEB前端开发技术,只要加进来坚持学习零基础也能够学会。

Last modified: 2019年10月9日

Previous Story

CSS教程

CSS伪元素:::after的用法

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

...

Next Story

CSS教程

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

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

...