`::before`와 `::after` 속성을 동시에 사용할 때, 우선순위는 CSS의 스타일 우선순위 규칙에 따라 결정됩니다.
1. CSS 스타일 우선순위는 다음과 같은 순서로 결정됩니다.
* 인라인 스타일 (style attribute)
* ID 선택자 (#id)
* 클래스 선택자 (.class), 속성 선택자 ([attr]),伪 클래스 (:hover)
* 요소 선택자 (element),伪 요소 (::before, ::after)
* 일반 선택자 (tag)
2. `::before`와 `::after` 속성을 동시에 사용할 때, 우선순위는 다음과 같이 결정됩니다.
* `::before` 속성이 우선합니다. `::before` 속성이 `::after` 속션보다 우선순위가 높을 때, `::before` 속성이 적용됩니다.
* `::after` 속성이 우선할 때, `::after` 속성이 적용됩니다.
3. 두 속성을 동시에 사용하여 콘텐츠를 추가하는 방법은 다음과 같습니다.
* `::before` 속성을 사용하여 요소 앞에 콘텐츠를 추가합니다.
* `::after` 속성을 사용하여 요소 뒤에 콘텐츠를 추가합니다.
* 콘텐츠를 추가할 때, `content` 속성을 사용하여 콘텐츠를 지정합니다.
* 콘텐츠를 추가할 때, `display` 속성을 사용하여 콘텐츠의 디스플레이를 지정합니다.
예를 들어, 다음 CSS 코드는 요소 앞에 "Hello" 콘텐츠를 추가하고, 요소 뒤에 "World" 콘텐츠를 추가합니다.
#hostingforum.kr
css
.element::before {
content: "Hello";
display: inline-block;
}
.element::after {
content: "World";
display: inline-block;
}
이러한 방법으로, `::before`와 `::after` 속성을 사용하여 요소 앞과 뒤에 콘텐츠를 추가할 수 있습니다.
2025-05-26 22:25