对网页元素批量的加预定义效果
content中放的是16进制unicode编码
比如「我」的unicode是6211（16进制）,content:"我" 和 content:"\6211" 的含义是一样的
演示效果:
代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
/*两人的对话*/
.a::before
{
content:"顾客说";
color:red;
font-weight:bold;
margin-right:10px;
}
.b::after
{
content:"老板说";
background-color:#ccc;
border-radius:5px;
color:blue;
font-weight:bold;
margin-left:10px;
}
/*连接*/
a{
position: relative;
margin-right:50px;
text-decoration:none;
}
a:hover::before，a:hover::after{position: absolute;}
a:hover::before{
content:'《《《';
left:-20px;
}
a:hover::after{
content:'》》》';
right:-20px;
}
</style>
</head>
<body>
<p class='a'>老板，请问这条裤子多少钱？</p>
<p class='b'>180元，广州正宗货，要不要？</p>
<p class='a'>我先看看……</p>
<p class='b'>别看了，东西是好东西，给你优惠点178元。</p>
<p class='a'>这也叫优惠啊？</p>
<p class='b'>呵呵，好吧就160元，这回可以了吧。</p>
<br><br>
<p>鼠标放到a标签上试试</p>
<a href="#">baidu.com</a>
<a href="#">blog.csdn.net</a>
<a href="#">163.com</a>
</body>
</html>
