Loại bỏ đường chấm quanh Active Links với CSS

Chúng ta có thể loại bỏ hành vi mặc định của hyperlinks là hiển thị một đường viền chấm (dotted outline) quanh chính chúng khi active hoặc focused bằng cách khai báo thuộc tính CSS outline trên active/focused links là none.

Giải pháp

a, a:active, a:focus {
  outline: none;
}

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Remove dotted line around links using css</title>
</head>
<style>
  div {
    color: #000; padding: 20px;
    background-image: linear-gradient(135deg, #dc3545 0%, #9599E2 100%);
    text-align: center;
  }
  a, a:active, a:focus { outline: none; }
</style>
<body>
  <div>
    <h1>HTML Links Demo</h1>
    <a href="https://google.com" target="_blank">Go To Google</a>
  </div>
</body>
</html>

Kết quả

Trước khi áp dụng giải pháp:

Sau khi áp dụng giải pháp:

⚠️ CẢNH BÁO VỀ ACCESSIBILITY (Khả năng tiếp cận):

Việc loại bỏ outline hoàn toàn (outline: none) trên focus state là KHÔNG KHUYẾN NGHỊ vì nó làm mất đi visual indicator cho người dùng điều hướng bằng bàn phím (keyboard navigation).

Giải pháp thay thế tốt hơn:

/* Tùy chỉnh outline thay vì xóa nó */
a:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Hoặc dùng box-shadow cho focus visible */
a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.5);
}

/* Chỉ ẩn outline cho mouse click, giữ cho keyboard focus */
a:focus:not(:focus-visible) {
  outline: none;
}
a:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

Lưu ý: :focus-visible là pseudo-class hiện đại (hỗ trợ tốt trên browser mới) chỉ khớp khi focus bởi bàn phím, không khớp khi click chuột.