1）before是css中的一种伪元素，可用于在某个元素之前插入某些内容。
2）after是css中的一种伪元素，可用于在某个元素之后插入某些内容。
简单的代码测试：
<style>
p:before{
content: "H" /*:before和:after必带技能，重要性为满5颗星*/
}
p:after{
content: "d" /*:before和:after必带技能，重要性为满5颗星*/
}
</style>
<p>ello Worl</p>
以上的代码将会在页面中展现的是"Hello World"。通过浏览器的"审查元素"看到的内容是：
<p>
::before
"ello Worl"
::after
</p>
p标签内部的内容的前面会被插入一个:before伪元素，该伪元素内包含的内容是"H"；而在p标签内的内容后面会被插入一个:after伪元素，该元素包含的内容是"d"。作为一只合格的程序猴子，捍卫"Hello World"的完整存在是必要的。
before的用法如下：
conj. (连词)
1、before主要引导时间状语从句，意为“先于”“…之后才”“(不多久)就…”。当主句是将来时时，从句谓语动词须用现在时；当主句是一般过去时或过去完成时时，从句常用过去时。before引导的时间状语从句不能用于否定式。
2、before还可用于barely〔scarcely〕...before结构，意为“刚…就…”。
3、before还可引导让步状语从句，意思是“宁愿…也不…”。
4、before引导的从句常用省略句型。
prep. (介词）
1、before可用于表示时间。首先，可以表示“先于，在…以前”，其后可以跟表示具体日期、时间等的名词或数词，也可以跟表示时间或动作的名词。其次，可以表示“在做…之前”，后接 v -ing。再次，可以表示“紧接在…之前”。
2、before用于否定句还可表示“直到…为止”。注意before之后只能接表示时间点的名词，而不能接表示时间段的名词。
3、before可用于表示动态或静态的位置，意思是“在…之前”，与behind相对。
adv. (副词)
1、before用作副词时,意思是“以前,在前面”,表示从较近的过去至较远的过去。用作时间状语泛指以前、不与具体时间连用时，谓语动词可以用一般过去时,也可用现在完成时,前者只表示“过去发生过”,后者则强调“对现在有影响”。
2、before与具体时间连用时,一般置于其后，谓语动词通常用过去完成时。
3、before也可表示空间或位置的“在前，在前面”，还可表示运动“到前面”。
扩展资料：before 英 [bɪ'fɔː(r)] 美 [bɪ'fɔːr]
conj. 在 ... 以前
pref. 在 ... 以前；在..前面
adv. 以前；以往；之前
相关例句：
1、B comes before C in the alphabet.
B在字母表里排在C之前。
2、He made a statement before the House of Commons.
他在下议院当众发表了一个声明。
3、He always put the interests of others before his own.
他总把他人的利益放在第一位。
4、I'd met him once before.
我曾经见过他。
5、I have seen that film before.
那部电影我以前看过。
参考资料：百度百科——before
:before是css中的一种伪元素，可用于在某个元素之前插入某些内容。:after是css中的一种伪元素，可用于在某个元素之后插入某些内容。
可以看下这个简单的例子：http://www.runoob.com/try/try.php?filename=trycss_sel_after
