: di chuột: trước khi trang trí văn bản không có hiệu ứng nào?

Question

Như tiêu đề, tôi đang thêm biểu tượng sử dụng .icon-*. Khi thêm một biểu tượng để một siêu liên kết:

<a href="#" class="icon-email icon-large">Email me!</a> 

Nội dung chèn vào bởi content bất động sản cho thấy gạch dưới text-decoration trên di chuột. Tôi muốn vô hiệu hóa các text-decoration chỉ dành cho các nội dung trước:

[class^="icon-"]:before, [class*=" icon-"]:before { 
    font-family: 'IcoMoon'; 
    font-style: normal; 
    speak: none; 
} 
.icon-mail:before { 
    content: "\37"; 
} 
[class^="icon-large-"]:before, [class*=" icon-large"]:before { 
    font-size: 48px; 
    line-height: 48px; 
} 
a[class^="icon-"]:before, a[class*=" icon-"]:before { 
    margin-right: 5px; 
    vertical-align: middle; 
} 

Tôi đã thử điều này, nhưng nó không làm việc (trang trí vẫn còn hiển thị):

a[class^="icon-"]:hover:before, a[class*=" icon-"]:hover:before { 
    text-decoration: none; 
    color: white; 
} 

Answer 1

Như the :before pseudo-element is rendered as a descendant box (cụ thể hơn, ngay trước khi là người đầu tiên hộp nội dung trẻ em) của nguyên tố tạo của nó, nó tuân theo the same rules its normal descendant boxes do with respect to text-decoration:

Các 'giáo khoa trang trí 'tài sản trên các yếu tố hậu duệ không thể có bất kỳ tác dụng trên trang trí của tổ tiên.

Xem những câu trả lời để biết thêm chi tiết:

• CSS text-decoration property cannot be overridden by child element
• How do I get this CSS text-decoration override to work?

Không có cách nào tốt xung quanh này ... sự lựa chọn duy nhất mà đến ngay lập tức để tâm trí là:

• Quấn văn bản theo phần tử span riêng của nó, sau đó áp dụng text-decoration cho rằng span, as shown by skip405. Bất lợi là, tất nhiên, đánh dấu thêm.

• Sử dụng một hình ảnh inline khối nền thay vì văn bản nội tuyến trong một phông chữ biểu tượng với pseudo-yếu tố :before của bạn (Tôi cũng khắc phục những mâu thuẫn với bộ chọn lớp học của bạn):

  [class^="icon-"]:before, [class*=" icon-"]:before { 
      display: inline-block; 
      width: 1em; 
      height: 1em; 
      background-size: contain; 
      content: ""; 
  } 
  .icon-email:before { 
      background-image: url(icon-mail.svg); 
      background-repeat: no-repeat; 
  } 
  .icon-large:before { 
      width: 48px; 
      height: 48px; 
  } 
  a[class^="icon-"]:before, a[class*=" icon-"]:before { 
      margin-right: 5px; 
      vertical-align: middle; 
  } 
  

  Ưu điểm này có qua giải pháp của skip405 là bạn không phải sửa đổi HTML, nhưng cho rằng nó sử dụng SVG vector background images và background-size, nó sẽ không hoạt động trong IE8.

  Nếu bạn cần hỗ trợ IE8, sau đó bạn phải rơi trở lại hình ảnh bitmap:

  .icon-email:before { 
      background-image: url(icon-mail.png); 
  } 
  .icon-email.icon-large:before { 
      background-image: url(icon-mail-large.png); 
  } 
  

Answer 2

Một selector pseudoelement phải là mục cuối cùng trong một chuỗi lựa chọn.

Bạn có thể áp dụng kiểu cho element:hover:before nhưng không được element:before:hover.

Answer 3

Đã thử một số việc chỉ sử dụng thẻ a làm đánh dấu, nhưng than ôi. Một giải pháp có thể có cho bạn có thể là bọc bên trong liên kết trong một phần tử khác, ví dụ: span. Vì vậy, bạn có thể có gạch dưới trên phần tử này (thay vì một giả) - được kiểm soát hoàn toàn bởi css.

Một ví dụ sống là ở đây: http://jsfiddle.net/skip405/fQHUH/

Answer 4

Bạn có thể thiết lập chiều cao & overflow: hidden cho: trước phần tử, và text-decoration sẽ không hiển thị :)

Answer 5

Chèn màn hình: inline-block; trong css của bạn. Một cái gì đó như hình dưới đây:

.icon-mail:before { 
    content: "\37"; 
    display:inline-block; 
    text-decoration:none; 
} 

Đây là JS Fiddle:

http://jsfiddle.net/73p2k/18/