[디알코] :before 로 불릿 포인트 만들기

스케치로 요로코롬 작업하고

리스트 앞에 네모난 불릿 포인트를 넣어보려고

li:before {

width: 4px;

height: 4px;

background: #C1C1C1;

margin-left: -20px;

}

요로코롬 넣었더니

결과는 이랬다.

아예 안나오네. 

왜지.

위 코드에  content:"";   도 추가해봤다.

그랬더니 앞으로 조금 이동.

content 가 뭔가 하긴 했네

이것도 display 랑 연관이 있는가 해서

display: inline-block; 도 추가

오오오오 나온다!!

:before 나 :after 같은 가상 선택자 이런거에는

content 랑 display 가 같이 가줘야 나오는구나. width, height 는 당연한거고.

위치를 맞춰주려고 조절을 해본다.

려다가 absolute 로 맞추는게 편한거 같아서

그 위 부모 요소한테 position:relative 를 주고

li:before {

width: 4px;

height: 4px;

background: #C1C1C1;

margin-left: -20px;

content: "";

display: inline-block;

        position: absolute;

        top: 22px;

}

요렇게 했더니

요로코롬  깔끔쓰하게 완성!  캬하하하하!!!

그런데 이런건 왜 할때마다 까먹고 할때마다 기억이 안나는지 모르겠다...