ตัวอย่าง
ตัวอย่างต่อไปนี้แทรก URL ในวงเล็บหลังจากแต่ละการเชื่อมโยง:
a:after
{
content: " (" attr(href) ")";
}
ลองตัวเอง» เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
สถานที่ให้บริการเนื้อหาที่จะใช้กับ: ก่อนและ: หลังจากหลอกองค์ประกอบที่จะแทรกเนื้อหาที่สร้าง
| ค่าเริ่มต้น: | normal |
|---|---|
| รับการถ่ายทอด: | no |
| Animatable: | no. Read about animatable |
| เวอร์ชัน: | CSS2 |
| ไวยากรณ์ javascript: | You can't give an element a pseudo-class by using JavaScript, but there are other ways to get the same result: Try it |
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| content | 1.0 | 8.0 | 1.0 | 1.0 | 4.0 |
Note: IE8 สนับสนุนเฉพาะสถานที่ให้บริการเนื้อหาถ้าประเภทเอกสารที่ระบุไว้!
CSS ไวยากรณ์
content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;ค่าทรัพย์สิน
| ความคุ้มค่า | ลักษณะ | ตัวอย่าง |
|---|---|---|
| normal | ค่ามาตรฐาน ชุดเนื้อหาถ้าระบุมาเป็นปกติซึ่งเริ่มต้นคือ "none" (which is nothing) | Try it » |
| none | ชุดเนื้อหาหากระบุเพื่ออะไร | Try it » |
| counter | ชุดเนื้อหาตามที่เคาน์เตอร์ | Try it » |
| attr (attribute) | ชุดเนื้อหาเป็นหนึ่งใน selector's แอตทริบิวต์ | Try it » |
| string | ชุดเนื้อหากับข้อความที่คุณระบุ | Try it » |
| open-quote | ชุดเนื้อหาที่จะอ้างเปิด | Try it » |
| close-quote | ชุดเนื้อหาที่จะอ้างปิด | Try it » |
| no-open-quote | เอาคำพูดเปิดจากเนื้อหาถ้าระบุ | Try it » |
| no-close-quote | เอาคำพูดปิดจากเนื้อหาถ้าระบุ | Try it » |
| url( url ) | ชุดเนื้อหาจะเป็นชนิดของสื่อบาง (an image, a sound, a video, etc.) | Try it » |
| initial | การตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น | |
| inherit | สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
วิธีการเพิ่มสี Bullet For <ul> หรือ <ol> โดยการเอากระสุนเริ่มต้นของพวกเขาและเพิ่มเป็นนิติบุคคล HTML ที่มีลักษณะเช่นกระสุน (•) :
ul {
list-style: none; /* Remove list bullets */
padding: 0;
margin: 0;
}
li {
padding-left: 16px;
}
li:before {
content: "•"; /* Insert content that
looks like bullets */
padding-right: 8px;
color: blue; /* Or a color you prefer */
} ลองตัวเอง» หน้าเว็บที่เกี่ยวข้อง
อ้างอิง CSS: ก่อนองค์ประกอบหลอก
อ้างอิง CSS: : หลังจากองค์ประกอบหลอก