CSS Pseudo-element โดยพื้นฐานแล้วจะเป็นตัวเลือกสำหรับส่วนเฉพาะขององค์ประกอบ เช่น อักษรตัวแรก บรรทัดแรก เป็นต้น :after และ :before องค์ประกอบหลอกสามารถใช้เพื่อแทรกหลังและก่อนองค์ประกอบตามลำดับ
ไวยากรณ์
ต่อไปนี้เป็นรูปแบบการใช้ CSS Pseudo องค์ประกอบ -
Selector::pseudo-element {
css-property: /*value*/;
} ตัวอย่าง
มาดูตัวอย่าง CSS Pseudo Elements กัน −
<!DOCTYPE html>
<html>
<head>
<style>
ol, ul {
list-style: none;
counter-reset: demo_var2;
}
ul {
counter-reset: demo_var1;
}
ol > li::before {
counter-increment: demo_var2;
content: counter(demo_var2, lower-roman) ") ";
}
li::after {
counter-increment: demo_var1;
content: " " counter(demo_var1) ". ";
}
</style>
</head>
<body>
<ul>
<li>Demo Line</li>
<ol>
<li>demo line</li>
<li>demo line</li>
</ol>
<li>Demo Line</li>
<ol>
<li>demo line</li>
<li>demo line</li>
</ol>
<li>Demo Line</li>
</ul>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
ตัวอย่าง
มาดูตัวอย่างอื่นของ CSS Pseudo Elements กัน −
<!DOCTYPE html>
<html>
<head>
<style>
::-webkit-input-placeholder { /*Support for Edge */
color: blue;
font-style: italic;
}
:-ms-input-placeholder { /*Support for Internet Explorer */
color: blue;
font-style: italic;
}
::placeholder {
color: blue;
font-style: italic;
}
</style>
</head>
<body>
<h2> Sample Form </h2>
<textarea id="desc" name="desc" rows="5" cols="33" placeholder="Type here"></textarea>
<br />
<input type="text" name="author" placeholder="author name">
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
