[CSS] 24. Pseudo Elements ( 슈도 엘리먼트 )

 

이번 포스팅에서는 슈도 엘리먼트들에 대해서 알아보도록 하겠습니다.

 

이녀석들은 슈도 클래스와 비슷한 녀석들입니다.  

 

이름 말고는 다른게 없어보이네요. ( 사실 저도 잘 몰라서 ...ㅋㅋㅋ )

 

문법도 슈도 클래스와 동일해보입니다.

selector:pseudo-element {property: value}

 

CSS 클래스와 함께 쓰이기도 하죠.

selector.class:pseudo-element {property: value}

 

가장 많이 사용되는 pseudo-elements에는 다음과 같은 것들이 있습니다. 

Value	Description
:first-line	Use this element to add special styles to the first line of the text in a selector.
:first-letter	Use this element to add special style to the first letter of the text in a selector.
:before	Use this element to insert some content before an element.
:after	Use this element to insert some content after an element.

The :first-line pseudo-element

Following is the example which demonstrates how to use :first-line element to add special effect to the first line of elements in the document .

<style type="text/css"> p:first-line { text-decoration: underline; } p.noline:first-line { text-decoration: none; } </style> <p class="noline"> This line would not have any underline because this belongs to nline class.</p> <p>The first line of this paragraph will be underlined as defined in the CSS rule above. Rest of the lines in this paragraph will remain normal. This example shows how to use :first-line pseduo element to give effect to the first line of any HTML element.</p>

 

결과는 아래와 같습니다.

The :first-letter pseudo-element

Following is the example which demonstrates how to use :first-letter element to add special effect to the first letter of elements in the document .

<style type="text/css"> p:first-letter { font-size: 3em; text-color:red; } p.normal:first-letter { font-size: 10px; } </style> <p class="normal"> First character of this paragraph will be normal and will have font size 10 px;</p> <p>The first character of this paragraph will be 3em big and in red color as defined in the CSS rule above. Rest of the characters in this paragraph will remain normal. This example shows how to use :first-letter pseduo element to give effect to the first characters of any HTML element.</p>

 

결과는 아래와 같습니다.

The :before pseudo-element

Following is the example which demonstrates how to use :before element to add some content before any element .

<style type="text/css"> p:before { content: url(/images/bullet.gif) } </style> <p> This line will be preceded by a bullet.</p> <p> This line will be preceded by a bullet.</p> <p> This line will be preceded by a bullet.</p>

 

결과는 아래와 같습니다.

 

 

The :after pseudo-element

Following is the example which demonstrates how to use :after element to add some content after any element .

<style type="text/css"> p:after { content: url(/images/bullet.gif) } </style> <p> This line will be succeeded by a bullet.</p> <p> This line will be succeeded by a bullet.</p> <p> This line will be succeeded by a bullet.</p>

 

 

 

결과는 아래와 같습니다.

 

 

 

 

 

 

손수 페이지 만들어서 직접 테스트 해보는 것 잊지 마세요.!!!! ^-^ 

 

 

 

 

 

 

 

Reference : http://www.tutorialspoint.com/css/css_pseudo_elements.htm