Home > Web Front-end > HTML Tutorial > css的after伪对象选择器简单介绍_html/css_WEB-ITnose

css的after伪对象选择器简单介绍_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:31:03
Original
1194 people have browsed it

css的after伪对象选择器简单介绍:
本章节将会介绍一下after伪对象选择器的用法,希望能够给需要的朋友带来一定的帮助。
此选择器前面要加两个点:或者四个点::,两个点的时候是css2中的写法,在css3中规定是四个点,这是为了和伪类选择器进行区别,当然当前两个点也是适用的。
语法结构:

E:after{ Rules } E::after{ Rules }
Copy after login

此选择器能够设置元素内部结尾的一些结构内容 通常和content属性一起使用,关于content可以参阅CSS的content属性一章节。
代码实例:

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>CSS教程</title>  <style type="text/css"> .box{  border:1px dotted #CCC;  width:200px;  height:30px;  line-height:30px;  text-align:center;  font-size:12px;} .box:after{    content:"antzone";  }</style>  </head>  <body>  <div class="box">蚂蚁部落</div>  </body>  </html>
Copy after login

以上代码可以可以再div元素的内部的后面添加指定的内容。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13556

更多内容可以参阅:http://www.softwhy.com/divcss/

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template