목록의 글 머리 기호 삼각형 만들기

<ul>
   <li>리스트 1</li>
   <li>리스트 2</li>
   <li>리스트 3</li>
</ul>

ul {
    margin: 0.75em 0;
    padding: 0 1em;
    list-style: none;
}
li:before { 
    content: "";
    border-color: transparent #111;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 0.9em;
    position: relative;
}

결과보기

여기서 보면 :before 셀럭터를 사용을 했는데.. ie8이상에서만 가능하다. 즉, ie6, ie7에서는 사용이 불가능하다.