Làm cách nào để xóa chỉ gạch chân khỏi a: before?

94

Tôi có một tập hợp các liên kết được tạo kiểu bằng cách sử dụng :befoređể áp dụng một mũi tên.

Nó trông đẹp trong tất cả các trình duyệt, nhưng khi tôi áp dụng gạch dưới cho liên kết, tôi không muốn có gạch chân trên :beforephần (mũi tên).

Xem jsfiddle chẳng hạn: http://jsfiddle.net/r42e5/1/

Có thể loại bỏ điều này? Phong cách thử nghiệm mà tôi đã ngồi đã #test p a:hover:befoređược áp dụng (theo Firebug), nhưng phần gạch dưới vẫn còn đó.

Có cách nào để tránh điều này không?

#test {
  color: #B2B2B2;
}

#test p a {
  color: #B2B2B2;
  text-decoration: none;
}

#test p a:hover {
  text-decoration: underline;
}

#test p a:before {
  color: #B2B2B2;
  content: "► ";
  text-decoration: none;
}

#test p a:hover:before {
  text-decoration: none;
}

<div id="test">
  <p><a href="#">A link</a></p>
  <p><a href="#">Another link</a></p>
</div>

Mở rộng đoạn mã

— OptimusCrime
nguồn

Chà, rõ ràng bạn muốn có một danh sách ... Sử dụng phần tử UL thay vì kết hợp DIV / P. Với danh sách bạn nhận được viên đạn (hoặc đĩa, ...) miễn phí ...

— Šime Vidas

Tại sao không sử dụng danh sách với dấu đầu dòng tùy chỉnh thay vì các đoạn văn trong trường hợp của bạn? Nếu không, hãy áp dụng trước nội dung cho p gốc, không phải để liên kết chính nó.

— YuS

Bản sao có thể xảy ra của stackoverflow.com/questions/8536015/…

— Oriol

171

Có thể loại bỏ điều này?

Có, nếu bạn thay đổi kiểu hiển thị của phần tử nội tuyến từ display:inline(mặc định) thành display:inline-block:

#test p a:before {
    color: #B2B2B2;
    content: "► ";
    display:inline-block;
}

Điều này là do thông số CSS cho biết :

Khi được chỉ định trên hoặc được truyền đến một phần tử nội tuyến, nó sẽ ảnh hưởng đến tất cả các hộp được tạo bởi phần tử đó và được truyền thêm tới bất kỳ hộp cấp khối trong luồng nào phân chia nội tuyến (xem phần 9.2.1.1). […] Đối với tất cả các yếu tố khác, nó được truyền cho bất kỳ phần tử nào trong dòng. Lưu ý rằng trang trí văn bản không được truyền cho các con cháu nổi và được định vị tuyệt đối, cũng như không cho nội dung của các con cháu cấp nội tuyến nguyên tử như khối nội tuyến và bảng nội tuyến .

(Nhấn mạnh của tôi.)

Demo: http://jsfiddle.net/r42e5/10/

_{Cảm ơn @Oriol đã cung cấp giải pháp đã nhắc tôi kiểm tra thông số kỹ thuật và thấy rằng giải pháp đó là hợp pháp.}

— Phrogz
nguồn

2

Bạn có thể ghi đè một text-decoration:underlineáp dụng cho một phần tử mẹ với display:inline-block. Xem ví dụ: jsfiddle.net/aZdhN/1 . Sau đó, vấn đề hỏi có thể được giải quyết như thế này: stackoverflow.com/a/17347068/1529630

— Oriol

3

Theo như tôi có thể thấy, điều này không hoạt động trong Internet Explorer (đã thử nghiệm 8-10). Bất kỳ ý tưởng làm thế nào để đối phó với IE?

— Linus Caldwell

Tôi đã tìm thấy một giải pháp đang hoạt động trong IE8-11: stackoverflow.com/a/21902566/1607968

— LeJared

52

Có một lỗi trong IE8-11 , vì vậy việc sử dụng display:inline-block;một mình sẽ không hoạt động ở đó.

Tôi đã tìm thấy giải pháp cho lỗi này, bằng cách thiết lập rõ ràng text-decoration:underline;cho: before-content và sau đó ghi đè quy tắc này một lần nữa bằngtext-decoration:none;

a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
a:before,
a:hover:before {text-decoration:none;}

Ví dụ làm việc tại đây: http://jsfiddle.net/95C2M/

Cập nhật: Vì jsfiddle không hoạt động với IE8 nữa, chỉ cần dán mã demo đơn giản này vào tệp html cục bộ và mở nó trong IE8:

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <style type="text/css">
        a {text-decoration:none;}
        a:hover {text-decoration:underline;}
        a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
        a:before,
        a:hover:before {text-decoration:none;}
    </style>
</head>
<body>
    <a href="#">Testlink</a> With no Underline on hover under before-content
</body>
</html>

— LeJared
nguồn

Đã có một trường hợp được IE8 nhấn mạnh của một hình ảnh siêu liên kết chỉ có thể được tắt bằng cách <img style="text-decoration:underline">bên trong (và đây là chìa khóa)<a style="padding:0; border:none;">

— Bob Stein

Rất tiếc, không thể xác minh jsfiddle trong IE8 vì jsfiddle không hoạt động trong IE8.

— user2867288

Rất tiếc, tôi không thể tìm thấy bất kỳ công cụ chia sẻ mã trực tuyến nào vẫn hoạt động với IE8. Tôi đã thêm một đoạn mã được cắt vào câu trả lời ở trên mà bạn có thể chỉ cần dán vào tệp html và mở nó cục bộ trong IE8.

— LeJared

Đã thử nghiệm và phê duyệt trên IE9, sự kiện không có hai trạng thái khác nhau.

— saeraphin

Có một liên kết có biểu tượng trong: trước đó được cho là KHÔNG được gạch chân ở trạng thái nghỉ, sau đó được gạch chân khi di chuột, nhưng không phải biểu tượng. Đây là những gì tôi phải làm để thuyết phục IE làm đúng như vậy: a {text-decoration: none} a: before {text-decoration: underline} a: before {text-decoration: none} (vâng, đầu tiên hãy gạch dưới, sau đó ghi đè bằng không) a: hover {text-decration: underline} a: hover: before {text-decoration: none}

— Fake Haak

7

Bạn có thể làm điều đó bằng cách thêm phần sau vào :beforephần tử:

display: inline-block;
white-space: pre-wrap;

Với display: inline-blockgạch dưới biến mất. Nhưng sau đó vấn đề là không gian sau khi tam giác sụp đổ và không được hiển thị. Để khắc phục, bạn có thể sử dụng white-space: pre-wraphoặc white-space: pre.

Demo : http://jsfiddle.net/r42e5/9/

— Oriol
nguồn

1

+1 cho pre-wrapgợi ý. Tôi đang sử dụng content:'►\a0'(\ a0 = & nbsp;)

— Hashbrown

1

Gói các liên kết của bạn theo nhịp và thêm trang trí văn bản vào khoảng trên a: di chuột như thế này,

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

Tôi đã cập nhật điều mà tôi nghĩ bạn đang cố gắng làm. http://jsfiddle.net/r42e5/4/

— Udder
nguồn

Ý tưởng tốt. Đó là cách tôi đã làm trước đây. Vấn đề là liên kết này được tạo trong hệ thống cms và khách hàng của chúng tôi đang tự điền vào đây dưới dạng văn bản có định dạng.

— OptimusCrime

ngôn ngữ CMS là gì? Có thể làm cho nó để lấy ra liên kết và sau đó quấn nó trong một khoảng thời gian trước khi gửi nó đến trình duyệt?

— Udders

Công ty đang sử dụng modx. Tôi đoán tôi có thể làm điều đó như một lối thoát cuối cùng, nhưng tôi thực sự muốn xóa bỏ điều đó. Đoán là không thể. Dù sao đi nữa cũng xin cám ơn.

— OptimusCrime

-1

thay vào đó hãy thử sử dụng:

#test p:before {
    color: #B2B2B2;
    content: "► ";
    text-decoration: none;
}

điều đó sẽ làm gì?

— Elen
nguồn

Tôi có thể có các đoạn trong div của mình, vì vậy điều đó sẽ không hoạt động. Ý kiến tốt tho.

— OptimusCrime

thú vị là người đặt -1 nếu câu trả lời được chấp nhận gợi ý giống nhau nhưng ở dạng khác ...

— Elen

-4

dùng cái này

#test  p:before {
    color: #B2B2B2;
    content: "► ";

}

— Bipin Chandra Tripathi
nguồn

không làm bất cứ điều gì. phần trang trí văn bản bị bỏ qua.

— OptimusCrime