가상요소로 불렛 코딩 추가하기

옛날 같으면 불렛을 넣으려면 이미지로 백그라운드해서 넣었지만

이제는 일일이 이미지 잘라줄 필요 없이 가상요소로 넣어주면 된다.

        <div class="txt_list">
          <ul>
            <li>첫번째 항목</li>
            <li>두번째 항목</li>
          </ul>
        </div>

이런식으로 before 가상요소를 사용하여

불렛을 추가해준다.

이런식으로 불렛이 추가된것을 확인할 수 있다.

이번에는 하이픈 모양이다

.txt_list ul li {
    position: relative;
    padding-left: 11px;
}


.txt_list li:before {
    content: '-';
    position: absolute;
    left: 0;
    top: 0;
}