วิธีลบเส้นใต้ลิงก์ (Remove Underline) ใน HTML

ใช้ CSS property text-decoration: none เพื่อลบเส้นใต้ของลิงก์ (<a>) ได้ทั้ง inline style และ stylesheet

วิธีการ

<a href="/about" style="text-decoration: none;">Link without underline</a>

ตัวอย่างเต็ม

<!DOCTYPE html>
<html>
<head>
  <title>HTML Text Decoration</title>
</head>
<body>
  <h2>About</h2>
  <p>
    Our <a href="/about/about_team.htm" style="text-decoration: none;">Team</a>
    comprises of programmers, writers, and analysts.
  </p>
</body>
</html>

ค่าอื่นของ text-decoration

แนวทางปฏิบัติที่ดี (CSS)

/* ลบ underline ทุกลิงก์ */
a {
  text-decoration: none;
}

/* ใส่ underline ตอน hover เท่านั้น */
a:hover {
  text-decoration: underline;
}

/* หรือใช้สีแทน */
a {
  text-decoration: none;
  color: #0066cc;
}
a:hover {
  color: #004499;
}

ข้อควรทราบ

• inline style override global styles
• การลบ underline ทั้งหมดอาจทำให้ผู้ใช้ไม่รู้ว่าเป็นลิงก์ ควรมีสีหรือ style แยกต่างหาก
• WCAG แนะนำให้ลิงก์มี visual distinction ชัดเจน