Note :这些特殊字符的html，js和css的写法是不同的，具体可查看html特殊字符的html，js，css写法汇总。
二、content属性::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。
content可取以下值。
1、string
使用引号包一段字符串，将会向元素内容中添加字符串。如：a:after{content:""}
举例：
p::before{ content: "《"; color: blue;}p::after{ content: "》"; color: blue;} 平凡的世界
2、attr()
通过attr()调用当前元素的属性，比如将图片alt提示文字或者链接的href地址显示出来。
a::after{ content: "(" attr(href) ")";} starof 3、url()/uri()
用于引用媒体文件。
举例：“百度”前面给出一张图片，后面给出href属性。
a::before{ content: url("https://www.baidu.com/img/baidu_jgylogo3.gif");}a::after{ content:"("attr(href)")";}a{ text-decoration: none;} --------------------------- 百度 效果：
4、counter()
调用计数器，可以不使用列表元素实现序号功能。
配合counter-increment和counter-reset属性使用：
h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }
代码:
body{ counter-reset: section;}h1{ counter-reset: subsection;}h1:before{ counter-increment:section; content:counter(section) "、";}h2:before{ counter-increment:subsection; content: counter(section) "." counter(subsection) "、";} ------------------------------------------------ HTML tutorials
HTML Tutorial
XHTML Tutorial
CSS Tutorial
Scripting tutorials
JavaScript
VBScript
XML tutorials
XML
XSL
效果：
了解更多可参考：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters
三、使用1、清除浮动
清除浮动方法有多种，现在最常用的就是下面这种方法，仅需要以下样式即可在元素尾部自动清除浮动
.cf:before,.cf:after { content: " "; display: table; }.cf:after { clear: both;}.cf { *zoom: 1;} 2、模拟float:center的效果
float没有center这个取值，但是可以通过伪类来模拟实现。
这个效果实现很有意思，左右通过::before float各自留出一半图片的位置，再把图片绝对定位上去。
核心css如下：
#page-wrap { width: 60%; margin: 40px auto; position: relative; }#logo { position: absolute; top: 0; left: 50%; margin-left: -125px; }#l, #r { width: 49%; }#l { float: left; }#r { float: right; }#l:before, #r:before { content: ""; width: 125px; height: 250px; }#l:before { float: right; }#r:before { float: left; } 完整代码如下：
Float Both * { margin: 0; padding: 0; } body { font: 14px/1.8 Georgia, serif; } #page-wrap { width: 60%; margin: 40px auto; position: relative; } #logo { position: absolute; top: 0; left: 50%; margin-left: -125px; } #l, #r { width: 49%; } #l { float: left; } #r { float: right; } #l:before, #r:before { content: ""; width: 125px; height: 250px; } #l:before { float: right; } #r:before { float: left; }
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
查看更多关于::before和::after伪元素的用法_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did109034