CSS ::before, ::after

CSS 가상 요소란? (Pseudo Element)

CSS 가상 요소는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있습니다. 예를 들어 ::first-line 을 사용하면 문단 첫 줄의 글씨체만 바꿀 수 있습니다.

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements

::before는 가상 요소중 하나이다. 요소 내용 앞쪽에 새 컨텐츠를 추가한다.

<style>
	.before::before {
		content: 'Hello ';
		color: red;
	}
</style>

<body>
	<p class="before">World</p>
</body>

Untitled

::after는 가상 요소중 하나이다. 요소 내용 뒤쪽에 새 컨텐츠를 추가한다.

<style>
	.after::after {
		content: ' World';
		color: blue;
	}
</style>

<body>
	<p class="after">Hello</p>
</body>

Untitled

간단한 예제만 봐서는 어디에 어떻게 사용하면 좋을지 감이 잡히지 않았다. 실사례를 몇가지 보고 나중에 사용해봐야겠다.

Untitled

react-grid-layout 에서는 컴포넌트를 리사이징하기 위한 영역의 버튼? 을 ::after로 처리하고 있었다.

Untitled