CSS - องค์ประกอบหลอก
CSS pseudo-elements ใช้เพื่อเพิ่มเอฟเฟกต์พิเศษให้กับตัวเลือกบางตัว คุณไม่จำเป็นต้องใช้ JavaScript หรือสคริปต์อื่นใดเพื่อใช้เอฟเฟกต์เหล่านั้น ไวยากรณ์อย่างง่ายขององค์ประกอบหลอกมีดังนี้ -
selector:pseudo-element {property: value}คลาส CSS ยังสามารถใช้กับองค์ประกอบหลอก -
selector.class:pseudo-element {property: value}องค์ประกอบหลอกที่ใช้บ่อยที่สุดมีดังนี้ -
| ซีเนียร์ | มูลค่าและรายละเอียด |
|---|---|
| 1 | :first-line ใช้องค์ประกอบนี้เพื่อเพิ่มลักษณะพิเศษให้กับบรรทัดแรกของข้อความในตัวเลือก |
| 2 | :first-letter ใช้องค์ประกอบนี้เพื่อเพิ่มลักษณะพิเศษให้กับตัวอักษรตัวแรกของข้อความในตัวเลือก |
| 3 | :before ใช้องค์ประกอบนี้เพื่อแทรกเนื้อหาบางส่วนก่อนองค์ประกอบ |
| 4 | :after ใช้องค์ประกอบนี้เพื่อแทรกเนื้อหาบางส่วนหลังองค์ประกอบ |
องค์ประกอบหลอกบรรทัดแรก
ตัวอย่างต่อไปนี้สาธิตวิธีใช้:องค์ประกอบบรรทัดแรกเพื่อเพิ่มลักษณะพิเศษให้กับองค์ประกอบบรรทัดแรกในเอกสาร
<html>
<head>
<style type = "text/css">
p:first-line { text-decoration: underline; }
p.noline:first-line { text-decoration: none; }
</style>
</head>
<body>
<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>
</body>
</html>มันจะสร้างลิงค์ต่อไปนี้ -
องค์ประกอบหลอกตัวอักษรตัวแรก
ตัวอย่างต่อไปนี้แสดงวิธีใช้:องค์ประกอบอักษรตัวแรกเพื่อเพิ่มลักษณะพิเศษให้กับอักษรตัวแรกขององค์ประกอบในเอกสาร
<html>
<head>
<style type = "text/css">
p:first-letter { font-size: 5em; }
p.normal:first-letter { font-size: 10px; }
</style>
</head>
<body>
<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 5em big 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>
</body>
</html>มันจะสร้างลิงค์สีดำดังต่อไปนี้ -
ก่อนองค์ประกอบหลอก
ตัวอย่างต่อไปนี้แสดงวิธีใช้องค์ประกอบ: beforeเพื่อเพิ่มเนื้อหาก่อนองค์ประกอบใด ๆ
<html>
<head>
<style type = "text/css">
p:before {
content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<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>
</body>
</html>มันจะสร้างลิงค์สีดำดังต่อไปนี้ -
หลังจากองค์ประกอบหลอก
ตัวอย่างต่อไปนี้แสดงวิธีใช้องค์ประกอบ: afterเพื่อเพิ่มเนื้อหาหลังองค์ประกอบใด ๆ
<html>
<head>
<style type = "text/css">
p:after {
content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<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>
</body>
</html>มันจะสร้างลิงค์สีดำดังต่อไปนี้ -