發(fā)現(xiàn)一個好玩的css，:before和:after ，可以很方便實現(xiàn)一些特殊效果，例如顯示狀態(tài)文字，陰影特效等等，下圖的‘已讀’效果就是通過這種css實現(xiàn)的

效果

貼上代碼：
<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