伪元素选择器
: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");