一：基本用法
::before和::after这两个伪类下有特有的属性content，用于在CSS渲染中向元素逻辑上的头部或尾部添加内容。这些内容不会改变文档的内容，不会出现在DOM中，不可复制，仅仅是在CSS渲染层加入。
1：[String] 使用引号包括一段字符串，将会向元素内容中添加字符串，如：a:after{content: ‘ / ‘}
2：attr() 调用当前元素的属性，可以方便的比如将图片的Alt提示文字或链接的Href地址显示出来，如下：
a:after {
content: "(" attr(href) ")";
}
3：url() / uri() 用于引入媒体文件
h1:before{
content: url(log.png);
}
4：counter() 调用计数器，可以不使用列表元素实现序号功能。
h2:before{
counter-increment: chapter;
content: "Chapter" counter(chapter) ". "
}
二：进阶技巧
1：清除浮动
.clear-fix{
*overflow: hidden;
*zoom: 1
}
.clear-fix:after{
display: table;
content: "";
width: 0;
clear: both
}
三：案例
<head lang="en">
<meta charset="UTF-8">
<title>伪元素</title>
<style>
#show{
background: wheat;
width: 650px;
height: 400px;
margin: 100px auto;
text-align: center;
}
p{
position: relative;
display: inline-block;
outline: none;
text-decoration: none;
color: #df5000;
font-size: 90px;
padding: 5px 10px;
}
p:hover::before,p:hover::after {
position: absolute;
}
p:hover::before {
content: "\5B"; left: -20px;
}
p:hover::after {
content: "\5D"; right: -20px;
}
</style>
</head>
<body>
<div id = "show"><p>nnjnmljkljklj</p></div>
</body>
各位***猿可以通过运行案例代码来看出效果，如果有不足之处，希望大家指出宝贵经验，谢谢！！！