CSS After Element插入mailto鏈接？

我試圖顯示一個mailto鏈接。這可能與CSS？CSS After Element插入mailto鏈接？

HTML

<li class="fe footer_no_link"></li>

CSS

.footer_column .fe:after {content:"<a href="mailto:[email protected]">[email protected]</a>"; }

來源

2012-03-14 Tom

內容與僞元素添加沒有出現在DOM中，所以沒有你不能。但你爲什麼要用CSS來做呢？這不是造型，正確的地方似乎直接在HTML文件上。

如果目標是阻止垃圾郵件，我通常使用這段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;

郵件被分裂，以確保它不會出現在任何文件的電子郵件。

您可以在這裏看到的結果：http://jsfiddle.net/tzkDt/

來源

2012-03-14 15:34:25 TimPetricola

我試圖阻止垃圾郵件機器人能夠讀取它。儘可能避免使用javascript – Tom 2012-03-14 17:17:20

我明白了，但我不認爲只有css或html才能阻止垃圾郵件。如果您最終決定可以使用它，我使用一些JavaScript編輯了我的帖子。 – TimPetricola 2012-03-15 13:57:24

你的價值沒有出現，因爲語音標記需要逃避，或改變：

.fe:after {content:"<a href='mailto:[email protected]'>[email protected]</a>"; }

http://jsfiddle.net/Cb2ry/

即使是這樣，雖然，你的內容將只顯示爲靜態文本，而不是渲染。

來源

2012-03-14 15:35:34 Curt

您不能將html添加到css中的content。除非你逃避一切。

http://jsfiddle.net/PDTng/

或者，你可以使用jQuery和使用的.html（），例如：

http://jsfiddle.net/PDTng/1/

來源

2012-03-14 15:42:27 Deadlykipper

這種方法似乎在屏幕上打印電子郵件地址？這對垃圾郵件機器人無能爲力嗎？還是jQuery使它不能被機器人讀取？謝謝！ – Tom 2012-03-15 14:31:31

這可能是有用的人......

而不是插入與CSS的鏈接，我將它編碼到html類中，但保留爲空。像這樣：

<p>This text is always here.</p> 
<a class="mobile" href="mailto:[email protected]"></a> 

.mobile:after { 
    content:'Click here to email us.' 
}

這種方式鏈接不會出現（高度：0，寬度：0），直到它有內容。

我將它用於響應式商店定位器，其中地圖以小屏幕尺寸堆疊在位置列表頂部，因此需要鏈接到列表定位器。我認爲這是一個「設計」決定，這是做此決定的唯一正當理由。

來源

2013-09-15 17:52:43 Theo

您不能使用CSS3 ::after或::before選擇器添加html元素。 content:""屬性將只接受純文本。

您必須記住，CSS僅用於樣式目的。這包括::before和::after選擇器。

您最好的選擇是使用JavaScript替代方案。

來源

2013-10-01 01:07:24 etoxin

CSS After Element插入mailto鏈接？

回答

相關問題