Fundamentals

Pseudo-element คืออะไร และต่างจาก Pseudo-class อย่างไร

Pseudo-element คือ selector พิเศษที่เริ่มต้นด้วยเครื่องหมาย :: (colon สองตัว) ใช้สำหรับ "สร้าง" หรือ "เลือกส่วนหนึ่ง" ของ element โดยไม่ต้องแก้ HTML ต่างจาก pseudo-class ที่เลือก element ในสถานะต่าง ๆ — pseudo-element สร้างหรือเลือก "ส่วนย่อย" ของ element หมายเหตุ: CSS2 ใช้ : (colon เดียว) กับ pseudo-element เช่น :before ก็ยังใช้ได้ แต่ :: (colon สองตัว) เป็นมาตรฐาน CSS3 ที่แนะนำ

::before และ ::after — เพิ่ม content โดยไม่แก้ HTML

::before และ ::after สร้าง "virtual element" ก่อนหรือหลังเนื้อหาของ element โดยไม่ต้องเพิ่ม HTML กฎสำคัญ: ต้องมี property content เสมอ (แม้จะเป็น content: "" ก็ตาม) ถ้าไม่มี content — pseudo-element จะไม่ปรากฏขึ้น ใช้บ่อยสำหรับ: เพิ่มไอคอน/เครื่องหมาย, สร้าง decorative element, clearfix

/* เพิ่มเครื่องหมาย → ก่อนหัวข้อ */
h2::before {
  content: "→ ";
  color: #3b82f6;
}

/* เพิ่ม tooltip หลัง link ที่มี data-tooltip */
a[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  background: #111827;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* decorative line ใต้หัวข้อ */
.title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: #3b82f6;
  margin-top: 8px;
}

::first-line และ ::first-letter

::first-line เลือกเฉพาะบรรทัดแรกของ text block (ตามความกว้างของ container จริง ๆ ไม่ใช่บรรทัดใน source code) ::first-letter เลือกเฉพาะตัวอักษรแรกของ block element ใช้สร้าง drop cap (ตัวอักษรใหญ่ตอนต้น) แบบที่เห็นในนิตยสาร

/* บรรทัดแรกมี style พิเศษ */
p::first-line {
  font-weight: bold;
  color: #1e3a8a;
  letter-spacing: 0.05em;
}

/* Drop cap — ตัวอักษรแรกใหญ่ */
p::first-letter {
  font-size: 3rem;
  font-weight: bold;
  float: left;
  line-height: 1;
  margin-right: 8px;
  color: #2563eb;
}

::placeholder

::placeholder เลือก placeholder text ใน input และ textarea — ข้อความจาง ๆ ที่ปรากฏก่อนผู้ใช้พิมพ์ browser มี default style ให้ (สีเทา opacity ต่ำ) แต่เราสามารถ override ได้

input::placeholder {
  color: #9ca3af;
  font-style: italic;
  font-size: 0.9rem;
}

textarea::placeholder {
  color: #d1d5db;
}

/* placeholder เปลี่ยนเมื่อ focus */
input:focus::placeholder {
  color: transparent;
}

::selection

::selection เลือก text ที่ผู้ใช้ highlight ด้วยเมาส์หรือแป้นพิมพ์ ทำให้ปรับสีการ highlight ให้เข้ากับ brand ได้ properties ที่ใช้ได้กับ ::selection มีจำกัด: color, background-color, text-shadow เท่านั้น

/* เปลี่ยนสี highlight ทั้งหน้า */
::selection {
  background: #bfdbfe;
  color: #1e3a8a;
}

/* เฉพาะ element ที่ต้องการ */
.highlight::selection {
  background: #fde68a;
  color: #78350f;
}

กฎสำคัญในการใช้ ::before และ ::after

• ต้องมี content property เสมอ — ถ้าไม่ต้องการข้อความให้ใช้ content: ""
• เป็น inline element โดย default — ต้องใส่ display: block หรือ position: absolute เมื่อต้องการ layout
• ไม่สามารถใช้กับ self-closing element เช่น <img>, <input>, <br>
• ไม่ปรากฏใน DOM จริง — JavaScript querySelector ไม่เจอ
• นับเป็นส่วนหนึ่งของ element — inherits styles จาก parent

สรุปท้ายบท

• Pseudo-element ใช้ :: (สองตัว) — ต่างจาก pseudo-class ที่ใช้ : (ตัวเดียว)
• ::before ::after เพิ่ม virtual content — ต้องมี content property เสมอ
• ::first-letter สร้าง drop cap — ::first-line style บรรทัดแรก
• ::placeholder ปรับ placeholder text ใน form
• ::selection เปลี่ยนสี highlight เมื่อผู้ใช้เลือกข้อความ
• ::before ::after ใช้ไม่ได้กับ self-closing element เช่น <img> <input>

Lab 1: Label Decorations

เป้าหมาย: ฝึกใช้ ::before และ ::after เพื่อเพิ่มข้อความตกแต่งโดยไม่แก้ HTML โจทย์: 1. ใช้ .label::before เพื่อเพิ่ม content: "NEW " ก่อนข้อความใน label 2. ใช้ .label::after เพื่อเพิ่ม content: " →" หลังข้อความใน label และกำหนด color: #2563eb

Lab 2: Reading Experience Details

เป้าหมาย: ฝึกใช้ pseudo-element เพื่อปรับรายละเอียดเล็ก ๆ ที่ช่วยให้อ่านและกรอกข้อมูลง่ายขึ้น โจทย์: 1. ใช้ .story p::first-letter เพื่อให้ตัวอักษรแรกมี font-size: 3rem และ color: #2563eb 2. ใช้ input::placeholder เพื่อให้ placeholder text มี color: #9ca3af 3. ใช้ ::selection เพื่อให้ข้อความที่ถูกเลือกมี background-color: #bfdbfe