CSS Pseudo-elements

CSS pseudo-element 는 요소의 특정 부분을 스타일 하는데 사용된다.

예를 들어, 다음과 같은데 사용될 수 있다.:

요소의 첫번째 문자나 줄을 스타일할 때
요소의 내용을 내용의 앞이나 뒤에 넣을 때

pseudo-elements 문법

의사 요소의 문법:

selector::pseudo-element {
property:value;
}

	참고: ::first-line vs. :first-line 에 있어서, 이중 콜론(double colon :: )기호를 주목하시오.

::first-line Pseudo-element

::first-line pseudo-element 는 텍스트의 첫 줄에 특별한 스타일을 추가하는데 사용된다.

::first-line pseudo-element 는 block-단위 요소에만 적용될 수 있다.

Example

p::first-line {
color: #ff0000;
font-variant: small-caps;
}

Try it yourself »

다음의 속성들이 "first-line" pseudo-element 에 적용된다:

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

::first-letter Pseudo-element

::first-letter pseudo-element 는 텍스트의 첫 문자에 특별한 스타일을 추가하는데 사용된다.

::first-letter pseudo-element 는 block-단위 요소에만 적용될 수 있다.

Example

p::first-letter {
color: #ff0000;
font-size: xx-large;
}

Try it yourself »

다음의 속성들이 "first-letter" pseudo- element 에 적용된다:

font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear

Pseudo-elements 와 CSS Classes

Pseudo-elements 는 CSS classes 와 결합될 수 있다:

Example

p.intro::first-letter {
color: #ff0000;
font-size:200%;
}

Try it yourself »

위의 예는 class="intro" 인 모든 단락의 첫 글자를 붉은색으로 표시한다.

다수의(multiple) Pseudo-elements

여러 pseudo-elements 들이 결합될 수 있다.

다은의 예에서, 단락의 첫 글자는 xx-large 폰트 크기의 붉은색이며, 첫 줄의 나머지 는 small-caps 의 파란색이고, 단락의 나머지는 기본 폰트 크기와 색을 가진다. :

Example

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

p::first-line {
    color: #0000ff;
    font-variant: small-caps;
}

Try it yourself »

CSS - ::before Pseudo-element

::before pseudo-element 는 요소의 내용 앞에 어떤 내용을 넣을 때 사용될 수 있다.

다음의 예에서는 <h1> 요소 앞에 이미지를 넣는다:

Example

h1::before {
content: url(smiley.gif);
}

Try it yourself »

CSS - ::after Pseudo-element

::after pseudo-element 는 요소의 내용 다음에 어떤 내용을 넣을 때 사용될 수 있다.

다음의 예에서는 <h1> 요소 다음에 이미지를 넣는다:

Example

h1::after {
content: url(smiley.gif);
}

Try it yourself »

CSS - ::selection Pseudo-element

::selection pseudo-element 는 사용자에 의해서 선택된 요소의 부분에 적용된다.

다음의 CSS 성질들에 ::selection 에 적용될 수 있다: color, background, cursor, outline

다음의 예는 선택된 텍스트를 yellow 배경에 red로 보여지게 한다:

Example

::selection {
color: red;
background: yellow;
}

Try it yourself »

Test Yourself with Exercises!

Exercise 1 » Exercise 2 » Exercise 3 »

All CSS Pseudo Elements

Selector	Example	Example description
::after	p::after	Insert content after every <p> element
::before	p::before	Insert content before every <p> element
::first-letter	p::first-letter	Selects the first letter of every <p> element
::first-line	p::first-line	Selects the first line of every <p> element
::selection	p::selection	Selects the portion of an element that is selected by a user

« Previous END of CSS »