chữ trang trí cho liên kết và chiều dài bên trong liên kết này

Question

Tôi có liên kết như:

<a href="#">Link text<span>Link sub-text</span></a> 

Khi lơ lửng Tôi cần điều đó văn bản bên trong khoảng không trang trí bằng gạch dưới (nhưng văn bản liên kết chính là). Có thể không? Tôi đã thử:

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

Điều này không hoạt động.

Có giải pháp nào cho vấn đề này không?

Answer 1

Thêm link text (văn bản mà bạn muốn được trang trí bằng gạch dưới) bên <span> và các tiểu văn bản bên ngoài dưới dạng văn bản liên kết bình thường, như:
<a href="#"><span>Link text</span>sub-text</a>

Để trang trí liên kết sử dụng văn bản:

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

Answer 2

Một giải pháp khác là sử dụng màu sắc thay vì gạch dưới như nhận dạng của bạn:

<a id="outer-link" href="#"> 
    Outer text <span id="inner-text">inner text</span> more outer text. 
</a> 

<style> 
    a { text-decoration: none; } 
    #outer-link:hover { color: green; } 
    #outer-link:hover #inner-text { color: red; } 
</style> 

Answer 3

Một si giải pháp phức tạp là sử dụng các thuộc tính color và border thay vì text-decoration. Trước tiên, bạn cần đặt text-decoration: none và sau đó sử dụng border-bottom làm gạch dưới cho tất cả các liên kết của mình.

style.css

a, a:link, a:visited 
{ 
color: #11bad3; 
text-decoration: none; 
border-bottom: 1px solid #11bad3; 
} 

a:hover, a:active 
{ 
background: #00a9c2; 
border-color: #00a9c2; 
color: #fff; 
} 

print.css

a, a:link, a:visited 
{ 
border-bottom: 0px; 
} 

index.html

<link rel="stylesheet" href="assets/css/style.css" type="text/css" media="all"> 
<link rel="stylesheet" href="assets/css/print.css" type="text/css" media="print"> 

Answer 4

Tôi biết đây là một ol d bài viết, nhưng kể từ khi tôi chỉ có cùng một vấn đề, và đã đưa ra một giải pháp, tôi figured tôi sẽ viết nó anyways.

Thay vì cố gắng sử dụng text-decoration: underline, thay vì chỉ sử dụng border-bottom: 1px solid # 000, theo cách này, bạn có thể chỉ đơn giản là nói border-bottom: none,