Tôi đang cố hiển thị liên kết mailto. Có thể với CSS?CSS Sau phần tử để chèn liên kết mailto?
html
<li class="fe footer_no_link"></li>
css
.footer_column .fe:after {content:"<a href="mailto:[email protected]">[email protected]</a>"; }
Nội dung được thêm với các phần tử giả không xuất hiện trong DOM, vì vậy không bạn không thể. Nhưng tại sao bạn muốn làm điều đó với CSS? Nó không phải là phong cách, đúng nơi có vẻ là trực tiếp trên tập tin HTML.
Nếu mục tiêu là để ngăn chặn thư rác, tôi thường sử dụng tác phẩm này của javascript:
var m;
m='in';
m+='f';
m+='[email protected]';
m+='mpl';
m+='e.co';
m+='m';
$ele = document.getElementById('contact-mail');
$ele.href = 'mailto:'+m;
$ele.innerHTML = m;
Các thư được tách ra để chắc chắn rằng nó không xuất hiện như một email trong bất kỳ tập tin.
Bạn có thể xem kết quả ở đây: http://jsfiddle.net/tzkDt/
giá trị của bạn đã không xuất hiện vì dấu bài phát biểu cần thoát, hoặc thay đổi:
.fe:after {content:"<a href='mailto:[email protected]'>[email protected]</a>"; }
Thậm chí sau đó mặc dù, nội dung của bạn sẽ chỉ hiển thị dưới dạng văn bản tĩnh chứ không phải hiển thị.
Bạn không thể thêm html vào content bằng css. Trừ khi bạn thoát khỏi mọi thứ.
Ngoài ra, bạn có thể sử dụng jQuery và sử dụng .html(), ví dụ:
Có vẻ như phương pháp này in địa chỉ email trên màn hình? Điều đó sẽ không giúp với các chương trình thư rác phải không? Hoặc jQuery làm cho nó để nó không thể được đọc bởi một bot? Cảm ơn! – Tom
này có thể có ích cho một ai đó ...
Thay vì chèn liên kết với css, tôi đã mã hóa nó vào html với một lớp href =, nhưng để trống nó. Như thế này:
<p>This text is always here.</p>
<a class="mobile" href="mailto:[email protected]"></a>
.mobile:after {
content:'Click here to email us.'
}
Bằng cách đó, liên kết không xuất hiện (chiều cao: 0, chiều rộng: 0) cho đến khi liên kết có nội dung.
Tôi đã sử dụng nó cho một bộ định vị cửa hàng đáp ứng, nơi bản đồ được xếp chồng lên trên danh sách vị trí ở kích thước màn hình nhỏ, đòi hỏi một liên kết đến danh sách neo. Tôi coi đó là một quyết định "thiết kế", đó là lý do chính đáng duy nhất để làm điều đó.
bạn không thể thêm phần tử html bằng bộ chọn CSS3 ::after hoặc ::before. Thuộc tính content:"" sẽ chỉ chấp nhận văn bản thuần túy.
Bạn phải nhớ rằng CSS chỉ dành cho mục đích tạo kiểu. Điều này bao gồm các bộ chọn ::before và ::after.
Tùy chọn tốt nhất của bạn là sử dụng phương án thay thế JavaScript.
Tôi đang cố chặn các rô bốt spam không đọc được. Cố gắng tránh javascript nếu có thể – Tom
Tôi hiểu, nhưng tôi không nghĩ rằng một thay thế tồn tại chỉ với css hoặc html để chặn spam trên mailto. Tôi đã chỉnh sửa bài đăng của mình bằng một số javascript nếu cuối cùng bạn quyết định có thể sử dụng nó. – TimPetricola