selector:pseudo-element {property: value}
selector.class:pseudo-element {property: value}
selector.class:pseudo-element {property: value}
| Pseudo-element | Purpose |
|---|---|
| :first-letter | กำหนด style ให้ตัวอักษรตัวแรกของข้อความ |
| :first-line | กำหนด style ให้กับข้อความบรรทัดแรก |
| :before | Inserts some content before the content of an element |
| :after | Inserts some content after the content of an element |
The :first-letter Pseudo-element
การกำหนดรูปแบบให้กับตัวอักษรตัวแรกของ element
ตัวอย่าง
<html>
<head>
<style type="text/css">
p:first-letter {color:#ff0000;font-size:xx-large}
</style>
</head>
<body>
<p>Enjoyday.net</p>
</body>
</html>
ผลลัพธ์<head>
<style type="text/css">
p:first-letter {color:#ff0000;font-size:xx-large}
</style>
</head>
<body>
<p>Enjoyday.net</p>
</body>
</html>
Enjoyday.net
หรือ จะเขียน Pseudo-element กับ CSS Classes ก็ได้
ถ้าต้องการระบุให้เฉพาะบาง paragraph เท่านั้นที่แสดงผล เขียนได้ดังนี้
p.article:first-letter {color:#ff0000}
<p class="article">Enjoyday.net</p>
<p>Enjoyday.net</p>
ผลลัพธ์<p class="article">Enjoyday.net</p>
<p>Enjoyday.net</p>
Enjoyday.net
Enjoyday.net
Enjoyday.net
The :first-line Pseudo-element
การกำหนดรูปแบบให้กับตัวอักษรบรรทัดแรกของ element
ผลลัพธ์
<html>
<head>
<style type="text/css">
p:first-line {color:#0000ff}</style>
</head>
<body>
<p>Heath<br>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p>
</body>
</html>
ผลลัพธ์<head>
<style type="text/css">
p:first-line {color:#0000ff}</style>
</head>
<body>
<p>Heath<br>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p>
</body>
</html>
Health
รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ
รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ
Multiple Pseudo-elements
เราสามารถนำทั้ง 2 แบบมาเขียนผสมกันได้
ตัวอย่าง
<html>
<head>
<style type="text/css">
p:first-letter {color:#ff0000;font-size:xx-large}
p:first-line {color:#0000ff}</style>
</head>
<body>
<p>Heath<br>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p>
</body>
</html>
<head>
<style type="text/css">
p:first-letter {color:#ff0000;font-size:xx-large}
p:first-line {color:#0000ff}</style>
</head>
<body>
<p>Heath<br>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p>
</body>
</html>
ผลลัพธ์
Health
รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ
รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ
CSS2 - The :before Pseudo-element
สามารถกำหนดเพิ่ม content บางอย่าง ก่อนแสดง content ของ element นั้นๆ *ใช้ไม่ได้กับ web browser IE
ตัวอย่าง
<html>
<head>
<style type="text/css">
h1:before
{
content: url(../images/star_icons.gif)
}
</style>
</head>
<body>
<h1>This is a header</h1>
</body>
</html>
ผลลัพธ์<head>
<style type="text/css">
h1:before
{
content: url(../images/star_icons.gif)
}
</style>
</head>
<body>
<h1>This is a header</h1>
</body>
</html>
This is a header
CSS2 - The :after Pseudo-element
สามารถกำหนดเพิ่ม content บางอย่าง หลังจากแสดง content ของ element นั้นๆ *ใช้ไม่ได้กับ web browser IE
ตัวอย่าง
<html>
<head>
<style type="text/css">
h1:after
{
content: url(../images/star_icons.gif)
}
</style>
</head>
<body>
<h1>This is a header</h1>
</body>
</html>
ผลลัพธ์<head>
<style type="text/css">
h1:after
{
content: url(../images/star_icons.gif)
}
</style>
</head>
<body>
<h1>This is a header</h1>
</body>
</html>
