การลบเส้นใต้ลิงก์เริ่มต้นด้วย CSS

เพื่อลบเส้นใต้เริ่มต้นของลิงก์ด้วย CSS โค้ดดังนี้:

ตัวอย่างที่ 1: ลบ underline สำหรับ link และ visited

<!DOCTYPE html> <html> <head> <style> a:link {    color: blue;    text-decoration: none; } a:visited {    color: blue;    text-decoration: none; } </style> </head> <body> <h1>Demo Heading</h1> <div> <p>This is the <a href="https://tutorialspoint.com">reference</a></p> </div> </body> </html>

ผลลัพธ์

ตัวอย่างที่ 2: ลบ underline ทุกสถานะ (link, hover, active)

<!DOCTYPE html> <html> <head> <style> a:link {    color: blue;    text-decoration: none; } a:hover {    color: blue;    text-decoration: none; } a:active {    color: blue;    text-decoration: none; } </style> </head> <body> <h1>Demo Heading</h1> <div> <p>This is the <a href="https://tutorialspoint.com">reference</a></p> </div> </body> </html>

ผลลัพธ์

วิธีการต่างๆ ในการลบ underline

แนะนำ: Custom Underline ที่สวยกว่า

a {
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
  transition: border-color 0.3s;
}
a:hover {
  border-bottom-color: transparent; /* หรือเปลี่ยนสี */
}

ข้อควรระวัง: การลบ underline ทำให้ลิงก์ดูไม่เหมือนลิงก์ ควรมีสีหรือสไตล์อื่นแทน (เช่น bold, color change, border-bottom) เพื่อ accessibility