이번 포스팅에서는 슈도 엘리먼트들에 대해서 알아보도록 하겠습니다.
이녀석들은 슈도 클래스와 비슷한 녀석들입니다.
이름 말고는 다른게 없어보이네요. ( 사실 저도 잘 몰라서 ...ㅋㅋㅋ )
문법도 슈도 클래스와 동일해보입니다.
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
'💻 Programming > CSS' 카테고리의 다른 글
| [CSS] 26. Filters - Texts and Image Effects ( 텍스트, 이미지 효과 ) (0) | 2016.06.12 |
|---|---|
| [CSS] 25. @ Rules ( @ 규칙들 ) (0) | 2016.06.12 |
| [CSS] 23. Pseudo Classes ( 슈도 클래스 ) (0) | 2016.06.12 |
| [CSS] 22. Layers ( 레이어 ) (0) | 2016.06.12 |
| [CSS] 21. Positioning ( 포지셔닝, 위치 ) (0) | 2016.06.12 |