CSS中的:after伪类作用及基本用法介绍

在CSS中，:after伪类的作用就是在指定的元素内容(而不是元素本身)之后插入一个包含content属性指定内容的行内元素。下面本篇文章就来给大家介绍一下:after伪类，希望对大家有所帮助。

:after伪类选择器在被选元素的内容后面插入内容；需使用 content 属性来指定要插入的内容。

最基本的用法如下：

p:after {

content: "- 台词";

}

我是唐老鸭。

我住在 Duckburg。

效果图：

:after伪类属于内联元素，但是用display:block；属性可以将其转换成块状元素，比较常见的用法就是样式的一些实现，还有就是清除浮动的效果。。

注：对于在 IE8 中工作的 :after，必须声明 DOCTYPE。

after伪类相当于在元素内部插入两个额外的标签，其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上，可以简化HTML代码，提高可读性和可维护性。

after伪类的一些应用

1、 :after清除浮动

浮动布局导致高度坍塌影响到整体布局时元素需要清除浮动，使用:after就是其中的一种方法：.row:after {

width:0;

height:0;

content:'';

display: block;

clear: both;

}

2、:after小三角

* {

box-sizing: border-box;

}

.textRight {

text-align: right;

}

.triangle {

width: 300px;

}

.triangle p {

padding: 10px;

margin-bottom: 10px;

}

.triangle p span {

position: relative;

border-radius: 7px;

background-color: #9EEA6A;

padding: 6px 10px 8px 10px;

z-index: 1;

}

.triangle p span:after {

content: '';

display: block;

width: 0;

height: 0;

border: 8px solid transparent;

position: absolute;

top: 10px;

}

.triangle p.textRight span:after {

border-left: 8px solid #9EEA6A;

right: -16px;

}

效果图：