[CSS] - before, after

before, after은 inline 요소

• 인라인 요소 : 크기 값 가질 수 없고, 줄 안바뀜

.gnb a:before {
            content: '01';
            background-color: royalblue;
            color: #fff;
            width: 20px;
            height: 20px;
            display: inline-block;
            text-align: center;
            line-height: 20px;
            border-radius: 50%;
            margin-right: 5px;
            font-size: 12px;
        }

• 크기 값을 가져야한다면 display : inline-block

before after 썼다고 무조건 position 쓰는게 아님

.gnb a:after {
            content: 'update';
            font-size: 12px;
            background-color: crimson;
            color: #fff;
            margin-left: 5px;
            padding: 2px;
            border-radius: 2px;
        }

• position속성을 쓸거면 before을 쓰던, after을 쓰던 상관 없음