Các cách loại bỏ gạch chân của thẻ a trong CSS

Bài viết này chia sẻ với các bạn một số cách để loại bỏ gạch chân của thẻ a (liên kết) trong CSS. Nội dung được trình bày rất chi tiết, nếu bạn quan tâm thì hãy cùng theo dõi nhé.

Trong CSS, có một số cách chính để loại bỏ gạch chân của thẻ a (liên kết) như sau:

Sử dụng thuộc tính text-decoration
Thiết lập bằng bộ chọn thông dụng: Sử dụng bộ chọn thẻ a, đặt thuộc tính text-decoration là none để loại bỏ gạch chân của tất cả thẻ a. Mã như sau:

css

a {
text-decoration: none;
}

Thiết lập bằng bộ chọn lớp: Trước tiên gán cho thẻ a một class, ví dụ no-underline, rồi thiết lập kiểu bằng bộ chọn lớp. Ví dụ:

html

<a href=”#” class=”no-underline”>Liên kết không có gạch chân</a>

css

.no-underline {
text-decoration: none;
}

Thiết lập bằng bộ chọn ID: Gán một ID duy nhất cho thẻ a, sau đó sử dụng bộ chọn ID để loại bỏ gạch chân. Mã như sau:

html

<a href=”#” id=”specific-link”>Liên kết không có gạch chân</a>

css

#specific-link {
text-decoration: none;
}

Sử dụng bộ chọn giả (pseudo-class)
Thiết lập các pseudo-class link và visited: Sử dụng bộ chọn a:link và a:visited để đặt text-decoration: none cho cả liên kết chưa truy cập và đã truy cập. Mã như sau:

css

a:link, a:visited {
text-decoration: none;
}

Thiết lập pseudo-class hover: Trong a:hover, cũng thiết lập text-decoration: none để đảm bảo khi rê chuột lên liên kết thì cũng không hiển thị gạch chân. Tuy nhiên, để tăng trải nghiệm người dùng, bạn có thể thêm các hiệu ứng khác khi hover như đổi màu chữ, đổi màu nền… Ví dụ:

css

a:hover {
text-decoration: none;
color: blue; /* Khi rê chuột, màu chữ liên kết chuyển sang xanh dương */
}

Kế thừa từ phần tử cha
Tạo lớp cha không có gạch chân: Tạo một lớp cha có text-decoration: none, sau đó thẻ a bên trong sẽ kế thừa kiểu này. Mã như sau:

css

.no-underline-parent {
text-decoration: none;
}
.no-underline-parent a {
/* Bạn có thể thêm các kiểu khác cho thẻ a tại đây */
}

html

<div class=”no-underline-parent”>
<a href=”#”>Liên kết không có gạch chân</a>
</div>

Bài viết về cách loại bỏ gạch chân của thẻ a trong CSS đến đây là kết thúc. Hy vọng các bạn sẽ tiếp tục ủng hộ trong tương lai.