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>

มันจะสร้างลิงค์สีดำดังต่อไปนี้ -