Pseudo Elements
Table of contents
Pseudo-elements Selectors Basic
요소의 특정한 부분을 스타일하기 위해 사용
Syntax
selector::pseudo-element {
property: value;
}
Pseudo-elements Selectors Features
▸ 여러개 겹쳐서 사용가능, 모두 중복되어서 들어감
▸ 기존 클래스와 섞어서 사용할 수 있음
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
!Note
CSS3부터 가상 클래스와 가상 요소를 구별하기 위해 기호가 나눠짐
가상 선택자 = :(단일콜론)
가상 요소 = ::(이중콜론)
Pseudo-elements Selectors
::first-line
첫번째 문장 고르기
▸ 블록태그에만 사용할 수 있음
properties
font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
::first-letter
첫번째 음절
properties
font
color
background
margin
padding
border
text-decoration
vertical-align (only if “float” is “none”)
text-transform
line-height
float
clear
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
::before
선택된 요소 전 선택
▸ content는 필수요소!
h1::before {
content: “”;
}
활용예시
.p2{
position: relative;
display: inline-block;
}
.p2::before{
content: '';
width: 0px;
height: 20px;
position: absolute;
transform: skewX(15deg);
transition: all .5s;
z-index: -1;
}
.p2:hover:before{
width: 125px;
background: skyblue;
}
::after
선택된 요소 후 선택
▸ content property는 필수요소!
h1::after {
content: “”;
}
활용예시
.p3{
position: relative;
display: inline-block;
}
.p3::after{
content: '';
position: absolute;
background-color: gray;
padding: 2px 5px;
border-radius: 5px;
display: none;
transition: all .5s;
}
.p3:hover::after{
content: '야옹';
display: block;
}
::selection
드래그한 부분 선택
properties
color
background
cursor
outline
::selection {
color: red;
background: yellow;
}