发现一个好玩的css，:before和:after ，可以很方便实现一些特殊效果，例如显示状态文字，阴影特效等等，下图的‘已读’效果就是通过这种css实现的

效果

贴上代码：
<pre>.msg.readed:before {
content: '已读';
color: gray;
font-size: 12px;
background-color: gainsboro;
left: -35px;
position: absolute;
width: 35px;
top: 2px;
}</pre>
同样:after就是在元素后面加上文字或者其他样式。before和after都不会印象元素本身的样式，文字也无法复制，就像背景一样。
上图其实也有:after效果，就是文字右边的小三角，代码：
<pre>
.msg:after {
left: 100%;
content: ' ';
position: absolute;
top: 11px;
border-left: 5px solid lightcyan;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
width: 0;
height: 0;
}
</pre>
具体看这些样式在审查元素里面可以看到：

Paste_Image.png