css——after伪元素的使用

[]:after会在被选中的元素最后增加一个伪元素.

有以下两个比较重要的特点：

① 默认是行内元素
② css2的写法是":after",css3里为区分伪元素和伪类，写法是“::after”

栗子1：

css:

	div::after
	{
		content:"你好"
	}

html:

	<div>哈哈哈哈。</div>

它通过属性content来控制在选中元素之后增加的内容。上面的代码是在所有div之后增加一句“你好”.如图：

栗子2：

而我在做项目时常用的是在底部加一条bottom线。

	       div::after
			{
			content:"";
			border-bottom:1px solid red;
			display:block;
			}

			<div>哈哈哈哈。</div>
		

结果如图：

因为after默认是行内元素，这里需要给div的结尾设置一条1px的bottom线，由于行内元素在没内容的情况下不会显示，所以先把after转换为块级元素，然后给after1px的红色实线。具体实际应用可以自己设计。

PS：欢迎大佬指正及补充更多的用法！另外附afterCDN说明。