- 선택자에 키워드를 추가하여 해당 요소의 특정 부분에 스타일을 지정할 수 있다.
문법
selector::pseudo-element {
property: value;
}예제 모음
::after
- 선택자의 자식 요소 중 마지막 가상 요소를 생성
<html>
<style>
a::after {
content: " (" attr(href) ")";
}
.dead-link {
text-decoration: line-through;
}
.dead-link::after {
content: url("https://interactive-examples.mdn.mozilla.net/media/warning.svg");
display: inline-block;
width: 12px;
height: 12px;
}
</style>
<body>
<p>
The sailfish is named for its sail-like dorsal fin and is widely
considered the fastest fish in the ocean.
<a href="https://en.wikipedia.org/wiki/Sailfish"
>a 태그 내 콘텐츠 뒤에 href 요소 값 넣음</a
>.
</p>
<p>
The red lionfish is a predatory scorpionfish that lives on coral reefs of
the Indo-Pacific Ocean and more recently in the western Atlantic.
<a href="" class="dead-link">dead-link class 선택자 뒤에 svg 붙임</a>.
</p>
</body>
</html>
::before
- 선택자의 자식 요소 중 맨 앞에 가상 요소를 생성
<html>
<style>
a {
color: #0000ff;
text-decoration: none;
}
a::before {
content: "🔗";
}
.local-link::before {
content: url("https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg");
display: inline-block;
width: 15px;
height: 15px;
margin-right: 5px;
}
</style>
<body>
<p>
Learning resources for web developers can be found all over the internet.
Try out <a href="https://web.dev/">web.dev</a>,
<a href="https://www.w3schools.com/">w3schools.com</a> or our
<a href="https://developer.mozilla.org/" class="local-link"
>MDN web docs</a
>.
</p>
</body>
</html>
