Hướng dẫn how do i hide the underline in a link with css? - làm cách nào để ẩn gạch dưới trong liên kết với css?

Nếu bạn là nhà phát triển web, có lẽ bạn muốn loại bỏ lớp gạch chân mặc định xuất hiện khi bạn thêm một liên kết vào một trang.

Nội dung chính Show

• Sự kết luận
• Làm cách nào để ẩn gạch chân trong một liên kết?
• Làm thế nào để bạn hiển thị các siêu liên kết mà không cần gạch chân trong CSS?
• Làm thế nào để bạn không nhấn mạnh một liên kết trong HTML?

May mắn thay, cũng giống như các yếu tố khác trên trang web, bạn có thể tạo kiểu cho các thẻ neo chịu trách nhiệm hiển thị một liên kết.

Trong bài viết này, tôi sẽ chỉ cho bạn cách xóa gạch chân khỏi liên kết với CSS. Tôi cũng sẽ chỉ cho bạn bốn liên kết trạng thái có thể ở và cách loại bỏ gạch chân cho từng liên kết.

Theo mặc định, đây là cách thẻ liên kết xuất hiện trong trình duyệt:

Đầu tiên, điều quan trọng là phải biết rằng thẻ liên kết (thẻ neo) có thể ở 4 trạng thái khác nhau được gọi là lớp giả:

•  a {
         text-decoration: none;
  }
  

  8: Trạng thái thông thường của liên kết khi nó không hoạt động, truy cập hoặc di chuột trên

•  a {
         text-decoration: none;
  }
  

  9: Khi liên kết đã được người dùng nhấp vào, nghĩa là đã truy cập

• .boxhead .otherPage {
    color: #FFFFFF;
    text-decoration: none;
  }

  0: Khi người dùng đang di chuột trên liên kết

• .boxhead .otherPage {
    color: #FFFFFF;
    text-decoration: none;
  }

  1: Khi người dùng nhấp vào liên kết

N.B .: Các quốc gia (lớp giả) phải xuất hiện theo thứ tự được liệt kê ở trên do tính chất xếp tầng của CSS. The states (pseudo-classes) must appear in the order listed above due to the cascading nature of CSS.

Để cuối cùng xóa gạch chân mặc định của liên kết, bạn có thể nhắm mục tiêu tất cả các lớp giả và gán cho họ thuộc tính

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}

2 của

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}

3.remove the default underline of the link, you can target all the pseudo-classes and assign them a

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}

2 property of

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}

3.

<p>This is a <a href="#">link</a></p>

 a:link {
      text-decoration: none;
}

a:visited {
      text-decoration: none;
}

a:hover {
      text-decoration: none;
}

a:active {
      text-decoration: none;
}

Bạn cũng có thể xóa tất cả gạch chân mặc định trong một với bộ chọn phần tử neo:

 a {
       text-decoration: none;
}

Bạn có thể chơi với 4 lớp giả của thẻ liên kết bằng bút này:

Neo thẻ trạng thái

Sự kết luận

Tôi hy vọng bài viết này giúp bạn học cách loại bỏ gạch chân mặc định khỏi các liên kết trong CSS.

Nếu bạn thấy bài viết hữu ích, đừng ngần ngại chia sẻ nó với bạn bè và gia đình của bạn.

Cảm ơn vì đã đọc.

---

---

Học mã miễn phí. Chương trình giảng dạy nguồn mở của Freecodecamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Tôi đang cố gắng có một liên kết hiển thị màu trắng, không có gạch chân. Màu văn bản hiển thị chính xác là màu trắng, nhưng lớp gạch chân màu xanh vẫn kiên trì. Tôi đã thử

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}

<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

Làm thế nào tôi có thể loại bỏ lớp lót màu xanh khỏi liên kết?

MIT

10,8k10 Huy hiệu vàng47 Huy hiệu bạc74 Huy hiệu đồng10 gold badges47 silver badges74 bronze badges

Khi được hỏi ngày 7 tháng 5 năm 2010 lúc 15:29May 7, 2010 at 15:29

2

Bạn không áp dụng

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}

Thử cái này:

.boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}

Đã trả lời ngày 7 tháng 5 năm 2010 lúc 15:50May 7, 2010 at 15:50

Davor Lucicdavor LucicDavor Lucic

28.4K8 Huy hiệu vàng64 Huy hiệu bạc76 Huy hiệu đồng8 gold badges64 silver badges76 bronze badges

9

Thẻ neo (liên kết) cũng có các lớp giả như đã truy cập, di chuột, liên kết và hoạt động. Hãy chắc chắn rằng phong cách của bạn được áp dụng cho (các) nhà nước trong câu hỏi và không có phong cách nào khác là mâu thuẫn.

Ví dụ:

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

Xem W3.org để biết thêm thông tin về lớp giả hành động của người dùng: Hover,: Active và: Focus.user action pseudo-classes :hover, :active, and :focus.

Đã trả lời ngày 7 tháng 5 năm 2010 lúc 15:35May 7, 2010 at 15:35

JyeltonjyeltonJYelton

34,7K25 Huy hiệu vàng127 Huy hiệu bạc188 Huy hiệu đồng25 gold badges127 silver badges188 bronze badges

2

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}

<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

Đã trả lời ngày 7 tháng 5 năm 2010 lúc 15:35May 7, 2010 at 15:35

JyeltonjyeltonAlex K.

34,7K25 Huy hiệu vàng127 Huy hiệu bạc188 Huy hiệu đồng30 gold badges260 silver badges281 bronze badges

1

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}

<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

Example:

<a href="page.html"  style="text-decoration:none;"></a>

Alex K.alex K.

Chỉ cần thêm thuộc tính này vào thẻ neo của bạn

Hoặc sử dụng cách CSS.2 gold badges10 silver badges27 bronze badges

________số 8Dec 11, 2013 at 5:52

IdrisNagarajan S R

9972 Huy hiệu vàng10 Huy hiệu bạc27 Huy hiệu đồng2 gold badges18 silver badges30 bronze badges

0

Đã trả lời ngày 11 tháng 12 năm 2013 lúc 5:52

Nagarajan s rnagarajan s r

a:hover, a:visited, a:link, a:active {

    text-decoration: none!important;

    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

1.3982 Huy hiệu vàng18 Huy hiệu bạc 30 Huy hiệu ĐồngMar 11, 2017 at 22:58

Đôi khi những gì bạn đang nhìn thấy là một bóng hộp, không phải là một bản gạch chân văn bản.jeffmjack

Hãy thử điều này (sử dụng bất kỳ bộ chọn CSS nào phù hợp với bạn):4 silver badges14 bronze badges

2

Đã trả lời ngày 11 tháng 3 năm 2017 lúc 22:58anchor tag. So code should be following.

Jeffmjackjeffmjack

4904 Huy hiệu bạc14 Huy hiệu đồng

Bạn đã bỏ lỡ

<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

 a:link {
      text-decoration: none;
}

a:visited {
      text-decoration: none;
}

a:hover {
      text-decoration: none;
}

a:active {
      text-decoration: none;
}

 a:link {
      text-decoration: none;
}

a:visited {
      text-decoration: none;
}

a:hover {
      text-decoration: none;
}

a:active {
      text-decoration: none;
}

Các thuộc tính tiêu chuẩn hơn để trang trí văn bản3 gold badges35 silver badges36 bronze badges

0

Đã trả lời ngày 19 tháng 1 năm 2017 lúc 12:50

Santosh Khalsesantosh Khalse

 a:link {
      text-decoration: none;
}

a:visited {
      text-decoration: none;
}

a:hover {
      text-decoration: none;
}

a:active {
      text-decoration: none;
}

Đoạn trích này giả định trên một mỏ neo, thay đổi thành trình bao bọc của nó cho phù hợp ... và sử dụng tính đặc hiệu thay vì "! Quan trọng" sau khi bạn theo dõi nguyên nhân gốc.

Đã trả lời ngày 7 tháng 5 năm 2010 lúc 20:30May 7, 2010 at 20:30

1

Không nhìn thấy trang, khó suy đoán.

Nhưng nó nghe có vẻ như bạn có thể có

<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}

Đây là nơi sử dụng thanh công cụ Nhà phát triển Web Firefox là tuyệt vời, bạn có thể chỉnh sửa CSS ngay tại đó và xem mọi thứ có hoạt động không, ít nhất là cho Firefox. Nó dưới

<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

Đã trả lời ngày 7 tháng 5 năm 2010 lúc 15:44May 7, 2010 at 15:44

Artlungartlungartlung

32.7K16 Huy hiệu vàng68 Huy hiệu bạc120 Huy hiệu đồng16 gold badges68 silver badges120 bronze badges

0

Mặc dù các câu trả lời khác là chính xác, có một cách dễ dàng để thoát khỏi gạch chân trên tất cả các liên kết phiền phức đó:

 a:link {
      text-decoration: none;
}

a:visited {
      text-decoration: none;
}

a:hover {
      text-decoration: none;
}

a:active {
      text-decoration: none;
}

Điều này sẽ xóa gạch chân khỏi mỗi liên kết trên trang của bạn!

Đã trả lời ngày 30 tháng 6 năm 2017 lúc 18:23Jun 30, 2017 at 18:23

yarz-techyarz-techyarz-tech

2842 Huy hiệu vàng6 Huy hiệu bạc18 Huy hiệu đồng2 gold badges6 silver badges18 bronze badges

1

 a:link {
      text-decoration: none;
}

a:visited {
      text-decoration: none;
}

a:hover {
      text-decoration: none;
}

a:active {
      text-decoration: none;
}

Đã trả lời ngày 25 tháng 11 năm 2019 lúc 12:54Nov 25, 2019 at 12:54

Itzharitzharitzhar

12.3k6 Huy hiệu vàng54 Huy hiệu bạc60 Huy hiệu Đồng6 gold badges54 silver badges60 bronze badges

Không có câu trả lời nào làm việc cho tôi. Trong trường hợp của tôi có một tiêu chuẩn

 a:link {
      text-decoration: none;
}

a:visited {
      text-decoration: none;
}

a:hover {
      text-decoration: none;
}

a:active {
      text-decoration: none;
}

trong mã của tôi. Về cơ bản, bất cứ liên kết nào là, màu văn bản đều màu xanh lam và liên kết vẫn là bất cứ điều gì.

Vì vậy, tôi đã thêm mã ở cuối tiêu đề như thế này:

 a:link {
      text-decoration: none;
}

a:visited {
      text-decoration: none;
}

a:hover {
      text-decoration: none;
}

a:active {
      text-decoration: none;
}

Và vấn đề không còn nữa.

Đã trả lời ngày 12 tháng 7 năm 2018 lúc 4:22Jul 12, 2018 at 4:22

NeoneoNeo

7571 Huy hiệu vàng10 Huy hiệu bạc23 Huy hiệu đồng1 gold badge10 silver badges23 bronze badges

Bạn đã sử dụng trang trí văn bản không có trong bộ chọn sai. Bạn cần kiểm tra thẻ nào bạn cần trang trí không.

Bạn có thể sử dụng mã này

 a:link {
      text-decoration: none;
}

a:visited {
      text-decoration: none;
}

a:hover {
      text-decoration: none;
}

a:active {
      text-decoration: none;
}

HOẶC

 a:link {
      text-decoration: none;
}

a:visited {
      text-decoration: none;
}

a:hover {
      text-decoration: none;
}

a:active {
      text-decoration: none;
}

HOẶC

 a:link {
      text-decoration: none;
}

a:visited {
      text-decoration: none;
}

a:hover {
      text-decoration: none;
}

a:active {
      text-decoration: none;
}

Đã trả lời ngày 22 tháng 6 năm 2018 lúc 19:50Jun 22, 2018 at 19:50

Như những người khác đã chỉ ra, có vẻ như bạn không thể ghi đè các kiểu trang trí văn bản lồng nhau ... nhưng bạn có thể thay đổi màu trang trí văn bản.

Như một bản hack, tôi đã thay đổi màu sắc trong suốt:

 a {
       text-decoration: none;
}

Đã trả lời ngày 7 tháng 4 năm 2020 lúc 16:04Apr 7, 2020 at 16:04

BenbenBen

1.74317 Huy hiệu bạc20 Huy hiệu đồng17 silver badges20 bronze badges

Chỉ cần sử dụng tài sản

 a {
       text-decoration: none;
}

Và bạn được bảo hiểm. Làm việc hoàn hảo cho tôi khi tài sản trang trí văn bản hoạt động.

Đã trả lời ngày 22 tháng 9 năm 2016 lúc 9:11Sep 22, 2016 at 9:11

Nếu

<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

Đã trả lời ngày 12 tháng 6 năm 2018 lúc 1:09Jun 12, 2018 at 1:09

DekedekeDeke

4.2763 Huy hiệu vàng41 Huy hiệu bạc61 Huy hiệu Đồng3 gold badges41 silver badges61 bronze badges

Đặt mã HTML sau đây trước thẻ

<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

.boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}

Đã trả lời ngày 26 tháng 6 năm 2019 lúc 17:58Jun 26, 2019 at 17:58

qarly_blueqarly_blueqarly_blue

3613 Huy hiệu bạc6 Huy hiệu Đồng3 silver badges6 bronze badges

Trong trường hợp của tôi, tôi đã hình thành HTML kém. Liên kết nằm trong thẻ

.boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}

.boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}

Đã trả lời ngày 10 tháng 7 năm 2019 lúc 22:48Jul 10, 2019 at 22:48

Mwilcoxmwilcoxmwilcox

3.94522 Huy hiệu bạc20 Huy hiệu đồng22 silver badges20 bronze badges

Đặt trang trí văn bản: Không có; cho thẻ neo.

Ví dụ HTML.

 a {
       text-decoration: none;
}

Ví dụ CSS:

 a {
       text-decoration: none;
}

Đã trả lời ngày 4 tháng 7 năm 2020 lúc 15:03Jul 4, 2020 at 15:03

RafiqrafiqRafiq

7.1034 Huy hiệu vàng31 Huy hiệu bạc26 Huy hiệu Đồng4 gold badges31 silver badges26 bronze badges

Ghi đè phong cách trang trí văn bản lồng nhau. Tìm kiếm bất kỳ :: Trước hoặc :: Sau khi chọn và hiển thị không có bất kỳ trang trí văn bản nào, Border-Bottom, v.v. hoặc đặt lại một thuộc tính (Unset) cho bất kỳ thuộc tính màu văn bản nào như: Màu sắc trang trí văn bản, màu nền, vân vân.
Look for any ::before or ::after selectors and display none to any text-decoration, border-bottom, etc. or reset a property (unset) to any text color property like: text-decoration-color, background-color, etc.

 a {
       text-decoration: none;
}

hoặc

 a {
       text-decoration: none;
}

Đã trả lời ngày 2 tháng 11 năm 2021 lúc 18:51Nov 2, 2021 at 18:51

Dưới đây là một ví dụ cho điều khiển ASP.NET WebForms LinkButton:

 a {
       text-decoration: none;
}

Mã ẩn:

 a {
       text-decoration: none;
}

Đã trả lời ngày 8 tháng 3 năm 2017 lúc 16:21Mar 8, 2017 at 16:21

JoshYates1980JoshYates1980JoshYates1980

3.3772 Huy hiệu vàng35 Huy hiệu bạc56 Huy hiệu Đồng2 gold badges35 silver badges56 bronze badges

Làm cách nào để ẩn gạch chân trong một liên kết?

Làm thế nào để bạn hiển thị các siêu liên kết mà không cần gạch chân trong CSS?

Làm thế nào để bạn không nhấn mạnh một liên kết trong HTML?