css :before

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

效果

贴上代码：

.msg.readed:before {
 content: '已读';
 color: gray;
 font-size: 12px;
 background-color: gainsboro;
 left: -35px;
 position: absolute;
 width: 35px;
 top: 2px;
 }

同样:after就是在元素后面加上文字或者其他样式。before和after都不会印象元素本身的样式，文字也无法复制，就像背景一样。
上图其实也有:after效果，就是文字右边的小三角，代码：

 .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;
 }
 

具体看这些样式在审查元素里面可以看到：

Paste_Image.png