after与before应用

看bootstrap源码还是可以学到很多知识啊。
实现效果

鼠标hover的时候，有个border，并且会在蓝色三角形中打钩，纯css实现，但是在ie7及以下不支持。

    .box li:hover {outline: 1px solid #0cf}    .box li:after {        position: absolute;        display: block;        border-top: 28px solid #4390df;  //三角形设置        border-left: 28px solid transparent;        right: 0;  //位置设置。记得li要设置相对定位        top: 0;        content: "";        z-index: 101;     }    .box li:hover:before {  //打钩实现，当这里设置为after时，则上面要换成before        position: absolute;        display: block;        content: "√";        color: #fff;        font-size: 20px;        right: 0;top: 0;        z-index: 102;    }