css 伪元素::after

html-css014

css 伪元素::after,第1张

css ::after用来创建一个伪元素，做为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。 由于伪元素本身是行内元素，所以要变成块级元素的需要使用 display: block 以下是画一个三角形的图案的样式。 content是一定需要的，content 可以是： 值得注意的是: :after 和 ::after的关系

同学你是没有设置 border的样式，只定义宽度和颜色都是不管用的，线条的样式（border-style）是必须有的

border-style: 可以有4个样式，dotted、solid、double、dashed

dotted 定义点状边框。在大多数浏览器中呈现为实线。

solid 定义实线

double 定义双线。双线的宽度等于 border-width 的值。

dashed 定义虚线。在大多数浏览器中呈现为实线。

可以这么简写

.clas:after{

    content:"吗？"

border:#F00 10px solid/*颜色 宽度 实线*/

}

还有CSS :after 伪元素可以参考

http://www.w3school.com.cn/css/pr_pseudo_after.asp

:before 选择器在被选元素的内容前面插入内容。

定义中提到，是在被选元素的 内容 前面插入内容，如下图，div 是一个容器，div 中的内容是 testDiv元素 ，css 中的 :before 和 after 都显示在 div 内部，二者分别位于 testDiv元素 内容的前后。

所以可以看到，伪元素也是被选元素的内容，只是会插入到被选元素原本内容的前后。

插入的伪元素默认是 display 属性，如果想要为伪元素设置宽高等，需要修改伪元素的 display 属性为 inline-block 或者 block 。

伪元素插入的位置是被选元素的 内容 的前或者后，因此本质上伪元素也是被选元素的子元素。所以定位时，被选元素就是伪元素的父元素。

如图，被选元素 test-div 设置了 position: relative ，外部元素 test-wrapper 也设置了 position: relative ，然后对被选元素的伪元素 :after 设置定位，可以看到，伪元素的位置是根据 test-div 来定位的，因此，可以验证 被选元素就是伪元素的父元素 这句话。