学习css3笔记——:after伪元素

这个故事发生在某天，到华南植物园周边喝完早茶回公司，上网收集有趣的文字，整理修订多年前写好的《JavaScript》教程，并创作汉语SEO要用的《CSS语言》教程，存起来以后当文化传播作品使用。

一边整理《JavaScript》教程,一边在网上和女粉丝侃大山。突然间，一个说自已是从贵州毕节来广州学现代汉语的女粉丝问：“陈老师，最近文化传播教程又打算教点什么新东西？”。
我问：“你们都想学啥？”。
女粉丝说：“陈老师！我想知道:after伪元素用法。“下面就给大家讲下。

:after伪元素可以在元素后面插入文字。如语法1。

选择器:after
{
...属性：值...
}

设计一个伪类，在div元素后面插入“design-Rabbit”字符串。如css语言1。

div:after
{
content:"design-Rabbit";
background-color:#f17c67;
color:#F2EFE6;
font-weight:bold;
}

设计一个伪类，在p元素后面插入“design-Rabbit”字符串。如css语言2。

p:after
{
content:"design-Rabbit";
background-color:#495A80;
color:#F2EFE6;
font-weight:bold;
}

设计试验用元素h4、div、p内容为“微信公众号：”。如css语言3。

微信公众号：
微信公众号：
微信公众号：
微信公众号：
微信公众号：
微信公众号：
微信公众号：

把css语言1~3移植嵌入html5基础框架中。如综合代码1。

 



微信公众号：
微信公众号：
微信公众号：
微信公众号：
微信公众号：
微信公众号：
微信公众号：

运行综合代码1，就可以看到图1的效果，如果还不会运行方法，可以看我以前写的Html5，学习代码运行方法。

注：看到图1页面中字体显示乱马时charset="bg123"可以改成charset="utf-8"或改为其它的编码方式。有的浏览器会阻止脚本运行，这时请大家换下浏览器例如用IE浏览器或看下防火墙或看下杀毒软件有没报错。

图1

通过综合代码1我们可以看到有三个DIV元素和三个P元素。都是通过伪类在后面插入带色块的字符串“design-Rabbit”，看到如图1效果，就说明我们的试验成功了。

好！杰哥CSS3学习笔记分享到这里，要知后事如何请关注我，如果喜欢请打赏。