ol, ul의 marker 커스터마이징

웹 개발하던 도중 기본 ol의 스타일이 마음에 들지 않아 ol의 스타일을 바꾸려고 했다.

그런데 이게 무슨일! ol의 스타일을 바꾸는건 쉬웠는데 잘 되던 들여쓰기가 안되었다.

이게 무슨 말이냐면..

1. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
2. when an unknown printer took a galley of type and scrambled it to make a type
specimen book.

이런식으로 된다는 것이였다. 엔터를 치면 남아야 할 공간을 글자가 채워버려 깔끔하게 정렬이 되지 않는다.

비교를 위한 예시!

원래라면 이렇게 깔끔하게 내려와야 한다.
그래서 열심히 구글링한 결과 제대로 된 들여쓰기를 구현할 수있었다.

그래서 나온 css이다.

    <style>
        ol {
            list-style: none;
        }
        ol li {
            counter-increment: step-counter;
        }
        li {
            padding-left: 1.3em ;
        }
        li:before {
            content: counter(step-counter);
            display: inline-block;
            margin-left: -1.3em;
            width: 1.3em;
            color: black;
        }
    </style>

추가로 li:before의 content를 바꿔주면 marker를 변경할 수있다.

끗