การลบ Underline เริ่มต้นของลิงก์ด้วย CSS

โดยค่าเริ่มต้น ลิงก์ทุกตัวใน HTML จะมีขีดเส้นใต้ (underline) สามารถลบได้ด้วยคุณสมบัติ text-decoration ใน CSS

ไวยากรณ์ (Syntax)

Selector {
  text-decoration: /*value*/;
}

ตัวอย่างที่ 1: ลบ underline และเพิ่ม italic

<!DOCTYPE html>
<html>
<head>
  <style>
    p { padding: 5px; box-shadow: inset 0 0 5px violet; }
    a { font-style: italic; text-decoration: none; }
  </style>
</head>
<body>
  <a href="#">Demo</a>
  <p> <a href="https://example.com/">Example domain</a> </p>
</body>
</html>

ผลลัพธ์

ตัวอย่างที่ 2: ลบ underline ทั้งหมด สีลิงก์สุดท้ายต่างออกไป

<!DOCTYPE html>
<html>
<head>
  <style>
    div { margin: auto; width: 50%; text-align: right; color: green; border: thin dashed red; }
    a { text-decoration: none; }
    a:last-child { color: inherit; background-color: moccasin; }
  </style>
</head>
<body>
  <div>
    <a href="#">Link Demo</a>
    <p> Watch this: <a href="https://example.com/">Example site</a> </p>
  </div>
</body>
</html>

ผลลัพธ์

ค่าของ text-decoration (Shorthand)

text-decoration:  ||