CSS After Element to insert mailto link?

Question

I'm attempting to display a mailto link. Is that possible with CSS?

html

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

css

.footer_column .fe:after {content:"<a href="mailto:info@site.com">info@site.com</a>"; }

score 6 · Answer 1 · answered Oct 01 '13 at 01:07

you cannot add html elements with the CSS3 ::after or ::before selectors. The content:"" property will only accept plain text.

You must remember that CSS is for styling purposes only. This includes the ::before and ::after selectors.

Your best option is to use a JavaScript alternative.

score 4 · Answer 2 · answered Sep 15 '13 at 17:52

This might be useful to someone...

Instead of inserting the link with the css, I coded it into the html with an href & class, but left it empty. Like this:

<p>This text is always here.</p>
<a class="mobile" href="mailto:info@site.com"></a>

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

That way the link doesn't appear (height:0, width:0) until it has content.

I used it for a responsive store locator where the map was stacked on top of the location list at small screen sizes, necessitating a link to the list anchor. I considered it a "design" decision, which is the only justifiable reason to do it.

Neat idea! Not ideal for maintaining progressive enhancement, but really creative. — , May 08 '19 at 20:28

score 4 · Accepted Answer · edited May 29 '14 at 18:06

4

Content added with the pseudo-element doesn't appear in the DOM, so no you can't. But why do you want to do it with CSS ? It is not styling, the right place seems to be directly on the HTML file.

If the goal is to block spam, I usually use this piece of javascript:

var m; 
m='in';
m+='f';
m+='o@exa';
m+='mpl';
m+='e.co';
m+='m';
$ele = document.getElementById('contact-mail');
$ele.href = 'mailto:'+m;
$ele.innerHTML = m;

The mail is splitted to be sure that it doesn't appear as an email in any file.

You can see the result here: http://jsfiddle.net/tzkDt/

edited May 29 '14 at 18:06

James Donnelly

126,410
34
208
218

answered Mar 14 '12 at 15:34

TimPetricola

1,491
2
12
24

1

I'm trying to block spam robots from being able to read it. Trying to avoid javascript if possible – Tom Mar 14 '12 at 17:17
2

I see, but I don't think that an alternative exists with just css or html to block spam on a mailto. I edited my post with some javascript if you finally decide you can use it. – TimPetricola Mar 15 '12 at 13:57
Many bots will process javascript these days, so obscuring it like this will still only reduce spam, not prevent it. (And once it's on one spammer's list, it will eventually get on more because they share/sell them.) The only way to completely prevent bots from being able to read an email address is to present it as text (email me at myname at company dot com) or add garbage characters the user needs to remove, both of which prevent the convenience of one-click emailing. A contact us form where the email address is kept solely in the server side code might be better, if that's an option. – Jay Irvine May 14 '19 at 19:25

score 4 · Answer 4 · answered Mar 14 '12 at 15:35

Your value wasn't appearing because the speech marks needed escaping, or changing:

.fe:after {content:"<a href='mailto:info@site.com'>info@site.com</a>"; }

http://jsfiddle.net/Cb2ry/

Even then though, your content will just display as static text, rather than rendered.

score 0 · Answer 5 · answered Mar 14 '12 at 15:42

0

You can't add html to the content in css. Unless you escape everything.

http://jsfiddle.net/PDTng/

Alternatively, you could use jQuery and use .html(), eg:

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

answered Mar 14 '12 at 15:42

Deadlykipper

878
2
7
18

It seems like this method prints the email address on screen? That wouldn't help with spam bots would it? Or does jQuery make it so it can't be read by a bot? Thanks! – Tom Mar 15 '12 at 14:31

CSS After Element to insert mailto link?

5 Answers5

Linked

Related