Liên kết dừng: trước khi nội dung bị gạch dưới theo quy tắc được áp dụng cho liên kết

Question

Tôi có một liên kết văn bản được gạch dưới khi được di chuột. Tôi thêm vào đầu của liên kết một biểu tượng > sử dụng đoạn mã sau:

.box.blueb a { color: #0098aa; } 
.box.blueb a:hover { text-decoration: underline; } 
.box.blueb a:before { content: "> "; } 
.box.blueb a:before:hover { text-decoration: none; } 

Nhưng những gì tôi không muốn biểu tượng > nhấn mạnh khi liên kết được bay lượn. Làm thế nào để đạt được điều này?

Answer 1

http://jsfiddle.net/thirtydot/LmvgM/1/

Bạn cần phải quấn một span xung quanh văn bản bên trong a:

<div class="box blueb"> 
    <a href="#"><span>Hello</span></a> 
</div> 

Và sau đó thay đổi CSS của bạn như thế này:

.box.blueb a { color: #0098aa; text-decoration: none; } 
.box.blueb a:hover > span { text-decoration: underline; } 
.box.blueb a:before { content: "> "; } 

.box.blueb a:before:hover { text-decoration: none; } không hoạt động vì khi bạn đặt text-decoration: underline trên một phần tử (a), you can't then remove it trên con cháu (:before).

Answer 2

http://jsfiddle.net/LmvgM/8/

Nó có thể đạt được chỉ với css, mà không đánh dấu html bổ sung bằng cách thiết lập các mục: liên quan đến các liên kết, và vị trí tương ứng: tuyệt đối để: trước nội dung.

Sử dụng ví dụ này ...

<div class="box blueb"> 
    <a href="#">Hello</a> 
</div> 

... css sẽ trông như thế này:

.box.blueb a { 
    color: #0098aa; 
    position: relative; 
    margin-left: 5px; 
    padding-left: 10px; 
    text-decoration: none; 
} 

.box.blueb a:before { 
    content: "> "; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.box.blueb a:hover { 
    text-decoration: underline; 
} 

Answer 3

Bạn có thể làm điều đó CSS ​​chỉ thêm display: inline-block đến :before yếu tố:

.box.blueb a { color: #0098aa; } 
.box.blueb a:hover { text-decoration: underline; } 
.box.blueb a:before { content: "> "; display:inline-block; } 

Demo: http://jsfiddle.net/CaNyx/

---

Sửa:

Vấn đề là với display: inline-block không gian không được hiển thị, nhưng bạn có thể sửa chữa nó với white-space: pre hoặc white-space: pre-wrap

Demo: http://jsfiddle.net/CaNyx/1/

Answer 4

Câu hỏi này cũng được hỏi tại :hover:before text-decoration none has no effects? và trả lời https://stackoverflow.com/a/13376725/261747 đã hoạt động f hoặc tôi trong IE nữa.

Answer 5

Tôi biết điều này không trả lời cách dừng neo trước khi nội dung bị gạch dưới.
Nhưng công việc tốt nhất xung quanh tôi tìm thấy khi tôi cần hành vi này là không sử dụnga:before.

HTML:

<nav class="breadcrumb"> 
    <span><a href="#">Test 1</a></span> 
    <span><a href="#">Test 2</a></span> 
    <span><a href="#">Test 3</a></span> 
</nav> 

CSS:

nav.breadcrumb > span:before    { content: "> "; } 
nav.breadcrumb > span:first-child:before { content: ""; } 

Vì vậy, quy định cụ thể :before pseudo-class cho yếu tố đó kết thúc tốt đẹp neo, thay vì neo bản thân có vẻ như giải pháp tốt nhất tại khoảnh khắc.

---

Một ví dụ nếu bạn thích sử dụng danh sách:

HTML:

<ul class="breadcrumb"> 
    <li><a href="#">Test 1</a></li> 
    <li><a href="#">Test 2</a></li> 
    <li><a href="#">Test 3</a></li> 
</ul> 

CSS:

ul.breadcrumb       { margin: 0; padding: 0; } 
ul.breadcrumb > li     { display: inline;  } 
ul.breadcrumb > li:before    { content: "> ";   } 
ul.breadcrumb > li:first-child:before { content: "";   } 

Answer 6

Hãy thử điều này nếu bạn muốn có một CSS chỉ giải pháp. Đối với nó để làm việc trong IE, bạn cần bật một cách rõ ràng trước khi bạn tắt nó đi cho các yếu tố giả:

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

Vì vậy, trong ví dụ của bạn, bạn sẽ cần đến nó được viết:

.box.blueb a { text-decoration:none; } 
.box.blueb a:hover { text-decoration: underline; } 
.box.blueb a:before { text-decoration: underline; } 
.box.blueb a:before, 
.box.blueb a:before:hover { text-decoration: none; }