Cách tiêu chuẩn để thêm biểu tượng vào liên kết bằng CSS là gì?

Question

Tôi thường sử dụng padding + background-image để đặt biểu tượng bên cạnh liên kết.

Có nhiều ví dụ về cách tiếp cận này. Đây là một trong số từ here:

<a class="external" href="http://www.othersite.com/">link</a> 

    a.external { 
    padding-right: 15px; 
    background: transparent url(images/external-link-icon.gif) no-repeat top right; 
}  

Nhưng hầu hết các trình duyệt không in hình nền, gây phiền nhiễu.

tiêu chuẩn là gì để đặt biểu tượng bên cạnh các liên kết có ngữ nghĩa chính xác và hoạt động trong mọi trường hợp?

---

EDIT

gì về CSS :before và :after? Đây có phải là một thực hành được khuyến nghị không?

a.test:after { 
    padding-right: 5px; 
    content: url(../pix/logo_ppk.gif); 
} 

Answer 1

Tôi sẽ tự đệm nó và đặt hình nền qua lớp CSS (giống như ví dụ của bạn). Đó là con đường nhẹ nhất, nó giữ ánh sáng tài liệu và ngữ nghĩa.

Nếu in chúng thực sự quan trọng (và tôi có nghĩa là thực sự quan trọng) hãy gắn một hình ảnh thực ở đó nhưng lưu ý rằng nó đánh dấu sự đánh dấu từ khía cạnh ngữ nghĩa.

Có lẽ một giải pháp thỏa hiệp tốt hơn là nên có một "phiên bản in được" trong đó sử dụng hình ảnh thay vì (hoặc bằng một cái gì đó máy chủ kích thước hoặc một số JS thay thế các lớp CSS với một hình ảnh thực tế.

Answer 2

Mặc dù như Oli nói giữ biểu tượng trong css là phương pháp tốt nhất và không có cách nào để in css hình nền. (cho đến khi bạn bật nền css in từ các thiết lập trình duyệt).

nhưng nếu bạn có thể sử dụng javascript sau đó phương pháp này sẽ làm việc cho bạn

http://www.learningjquery.com/2008/08/quick-tip-dynamically-add-an-icon-for-external-links

bạn có thể thêm hình ảnh nội tuyến để liên kết.