Loại bỏ gạch chân mặc định của Link bằng CSS

Để loại bỏ gạch chân mặc định của liên kết bằng CSS, thiết lập text-decoration: none cho các trạng thái link.

Ví dụ 1: Link và visited không gạch chân

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  color: blue;
  text-decoration: none;
}
a:visited {
  color: blue;
  text-decoration: none;
}
</style>
</head>
<body>
<h1>Tiêu đề Demo</h1>
<div>
  <p>Đây là <a href="https://tutorialspoint.com">tham chiếu</a></p>
</div>
</body>
</html>

Kết quả

Ví dụ 2: Tất cả trạng thái không gạch chân

<!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>Tiêu đề Demo</h1>
<div>
  <p>Đây là <a href="https://tutorialspoint.com">tham chiếu</a></p>
</div>
</body>
</html>

Kết quả

Mẹo hiện đại:

a { text-decoration: none; }
a:hover { text-decoration: underline; }

Chỉ gạch chân khi hover để UX tốt hơn - người dùng nhận ra được link.