CSS로 삼각형 목록 볼릿 만들기 예제입니다.
CSS :
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;
}
HTML :
<ul>
<li><a href="http://365ok.co.kr/"><span>Home</span></a></li>
<li><a href="http://365ok.co.kr/bbs/board.php?bo_table=eduhtml"><span>HTML</span></a></li>
<li><a href="http://365ok.co.kr/bbs/board.php?bo_table=educss"><span>CSS</span></a></li>
<li><a href="http://365ok.co.kr/bbs/board.php?bo_table=edujavascript"><span>JavaScript</span></a></li>
<li><a href="http://365ok.co.kr/bbs/board.php?bo_table=edujquery"><span>jQuery</span></a></li>
<li><a href="http://365ok.co.kr/bbs/board.php?bo_table=edubootstrap"><span>Bootstrap</span></a></li>
</ul>
미리보기 :
등록된 댓글이 없습니다.