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