CSS Pseudo-elements

What are Pseudo-Elements?

A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

• Style the first letter, or line, of an element
• Insert content before, or after, the content of an element

수도-요소는 무엇일까?

css pseudo-element 요소는 요소의 구체적인 부분을 스타일하기 위해서 사용되어진다.

예를든다면, 이것은 요런식으로 사용되어질 수 있다.

요소의 첫문자 혹은 첫줄 스타일 하기

요소 내용의 뒤나 앞에 내용 삽입

 

 

Notice the double colon notation - ::first-line versus :first-line

The double colon replaced the single-colon notation for pseudo-elements in CSS3. This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements.

The single-colon syntax was used for both pseudo-classes and pseudo-elements in CSS2 and CSS1.

For backward compatibility, the single-colon syntax is acceptable for CSS2 and CSS1 pseudo-elements.

 

 

주의 What are Pseudo-Elements?

A CSS pseudo-element is used to style specified parts of an element.

 

For example, it can be used to:

 

Style the first letter, or line, of an element

Insert content before, or after, the content of an element

수도-요소는 무엇일까?

 

css pseudo-element 요소는 요소의 구체적인 부분을 스타일하기 위해서 사용되어진다.

 

예를든다면, 이것은 요런식으로 사용되어질 수 있다.

 

요소의 첫문자 혹은 첫줄 스타일 하기

 

요소 내용의 뒤나 앞에 내용 삽입

 

 

Notice the double colon notation - ::first-line versus :first-line

 

The double colon replaced the single-colon notation for pseudo-elements in CSS3. This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements.

 

The single-colon syntax was used for both pseudo-classes and pseudo-elements in CSS2 and CSS1.

 

For backward compatibility, the single-colon syntax is acceptable for CSS2 and CSS1 pseudo-elements.

 

 

더블 클론인것을 주의하라, :first-line 과 대조적으로 ::first-line

 

css3 에서 수도요소로서 더블 클론은 싱글 클론표현으로 대체된다.

수도 클래스와 수도요소를 구분하기 위해서 w3c로부터 시도된 것이다.

싱글 클론 문법은 css2 와 css1안에서 수도 요소와 클래스를 위해 모두 사용되어진다.

이전 버전과의 호환성을 위해 싱글 클론 문법은 css2와 css1에서 받아 드려진다.

 

 

The ::first-line Pseudo-element

The ::first-line pseudo-element is used to add a special style to the first line of a text.

The following example formats the first line of the text in all <p> elements:

 

::first-line 수도 요소는 텍스트의 첫라인의 구체적인 스타일을 추가하기 위해서 사용되어진다.

다음의 예제는 모든 <p> 요소의 첫번째 텍스트 라인을 포맷한다.

 

The ::first-letter Pseudo-element

The ::first-letter pseudo-element is used to add a special style to the first letter of a text.

The following example formats the first letter of the text in all <p> elements: 

 

::first-letter 수도 요소는 텍스트의 첫문자를 스타일을 추가하기 위해서 사용되어진다.

다음의 예제는 모든 <p> 요소의 첫 문자의 포맷팅한다.

 

Multiple Pseudo-elements

Several pseudo-elements can also be combined.

In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color:

 

여러개 수도 요소

몇몇의 수도 요소는 결합되어질 수 있다.

다음의 따라오는 예제에서 단락의 첫문자는 빨간색일것이고, 나머지 첫줄의 나머지는 파란색일것이다.

단락의 나머지는 기본적인 폰트와 사이즈일 것이다.

 

CSS - The ::before Pseudo-element

The ::before pseudo-element can be used to insert some content before the content of an element.

The following example inserts an image before the content of each <h1> element:

 

::before 수도 요소는 요소의 내용물의 전에 어떤 내용물을 삽입하기 위해서 사용되어진다.

다음의 예제는 각각의 <h1> 내용 전에 이미지를 삽입한다.

 

CSS - The ::after Pseudo-element

The ::after pseudo-element can be used to insert some content after the content of an element.

The following example inserts an image after the content of each <h1> element:

 

after 수도 요소는 요소의 내용물 뒤에 조금의 내용물을 삽입하기 위해서 사용되어진다.

다음의 예제는 각각의 h1 요소 뒤에 이미지를 삽입한다.