伪元素选择器

:first-letter

:first-line

:before

:after

之所以称为伪元素，是因为在效果上，使文档增加了临时元素。

:first-letter :first-line

div:first-letter{

float:left;

font-size:3em;

}

div:first-line{

color:#900;

line-height:125%;

}

<div>

<h1>古典小说网 创意软件站</h1><br>

<p> 致力于于 学习、工作中知识的记录管理<br>

致力于 教育软件开发<br>

致力于打造赏心悦目的阅读体验</p>

</div>

:before :after

这两个伪对象，必须配合content属性才有意义，它的作用是在指定的标记内产生一个新的行内标记，该行内标记内容由content指定。

E:before{

Content:文字或其它内容

}

E:after{

Content:文字或其它内容

}

li:after{

content:"(由古典小说网打造)";

font-size:12px;

color:#999;

}

.kuaile p:before{

content:"☆ ";

}

div p:before{

content:"☺ ";

}

<h1>软件介绍</h1>

<ul>

<li>快乐课堂软件</li>

<li>任性动图软件</li>

<li>小说阅读软件</li>

</ul>

<h2>快乐课堂介绍</h2>

<div>

<p>精致唯美 至臻体验 简单实用</p>

<p>每次上课，个性开头白，可自定义，可语音朗读</p>

<p>完善的点名积分机制 引发学生听课兴趣</p>

<p>根据 学号、成绩、考勤、课堂表现 进行速查</p>

<p>倒计时、课间锁定、放大镜、多媒体播放器等扩展功能</p>

</div>

<h2>老师评价</h2>

<div>

<p>很好 很有创意</p>

<p>这软件确实很实用</p>

<p>不错、对教学很好</p>

<p>学生很感兴趣</p>

<p>这个软件在小组教学中，很有帮助</p>

</div>

伪元素也可以添加图像

content:url("img.png");