pseudo element 를 이용해 요소 하나로 라벨, 버튼 둘다 만들기.

버튼을 보다보면, 라벨 + 버튼 인 경우가 많이 있다.

라벨도 text 를 가지고 버튼도 text 를 가지는데,

이때 라벨은 클릭할수없어야하고 버튼은 클릭할수있어야한다.

 

이때 보통 먼저 떠오르는 생각은 아래와 같을것이다.

<div>
    <span>Label</span>
    <button>Click Me!</button>
</div>

하지만 pseudo element 를 활용하면 굳이 dom 을 container 에다가 2개의 요소 (총 3개) 를 사용하지않고

하나의 요소로 끝낼수있다.

<button>
    ::before
    ::after
</button>

위의 ::before, ::after 는 html 안에서 추가하는게 아니라 CSS 에서 추가해야한다.

결과는 아래와 같다.

.button { 

    /* 일단 전체 event 를 끔. */
    pointer-events: none;

}

.button::before { 

    /* 라벨은 클릭해도 아무 반응 안함 */
    content: 'label';

}

.button::after {

    /* 여기는 클릭할수있음. */
    content: 'Click Me';

    pointer-events: all;

}

한가지 주의할점은 button 의 pointer events 를 끄고,

::after 즉 실제 버튼의 부위로 사용할곳에만 pointer events 를 활성화해주는것이다.