CSS 가상 요소란? (Pseudo Element)
CSS 가상 요소는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있습니다. 예를 들어 ::first-line 을 사용하면 문단 첫 줄의 글씨체만 바꿀 수 있습니다.
https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements
::before
::before는 가상 요소중 하나이다. 요소 내용 앞쪽에 새 컨텐츠를 추가한다.
예제
<style>
.before::before {
content: 'Hello ';
color: red;
}
</style>
<body>
<p class="before">World</p>
</body>
::after
::after는 가상 요소중 하나이다. 요소 내용 뒤쪽에 새 컨텐츠를 추가한다.
예제
<style>
.after::after {
content: ' World';
color: blue;
}
</style>
<body>
<p class="after">Hello</p>
</body>
어디에 사용될까?
간단한 예제만 봐서는 어디에 어떻게 사용하면 좋을지 감이 잡히지 않았다. 실사례를 몇가지 보고 나중에 사용해봐야겠다.
1. react-grid-layout
react-grid-layout 에서는 컴포넌트를 리사이징하기 위한 영역의 버튼? 을 ::after로 처리하고 있었다.
2. react-slick
react-slick 에서는 슬라이더를 이동하기 위한 버튼을 ::before로 처리하고 있었다.
3. bootstrap-daterangepicker
bootstrap-daterangepicker 에서는 모달의 arrow 영역을 ::after 로 처리하고 있었다.
4. float clear
<style>
h1, ul {
float: left;
}
nav::after {
content: '';
display: block;
clear: both;
}
</style>
<body>
<nav>
<h1>제목</h1>
<ul>
<li>1번</li>
<li>2번</li>
</ul>
</nav>
</body>평소에 float 사용을 지양하는 편이라 모르고 있었지만, float를 clear 하기 위한 용도로도 많이 사용되는 것 같았다.
마치며
몇가지 실사례를 보니, 기존 영역에 항상 붙어있는 어떤 영역(버튼 같은?)을 처리할 때 주로 사용되거나, float를 clear 하기 위해 자주 사용되었다. content에 text를 넣을 수 있다 하더라도, 실제 의미있는 내용을 넣는 것 보다, 관심사 분리를 위해 버튼 같은 UI를 표현하기 위한 용도로 사용하는 것이 좋을 것 같다.
