CODEWITHSUNDEEP
htmlcss
Tom
Tom

Reputation: 1263

CSS After Element to insert mailto link?

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:[email protected]">[email protected]</a>"; }

Upvotes: 13

Views: 78795

Answers (6)

Naeem Akhtar
Naeem Akhtar

Reputation: 1138

You can also use attr(href) in after.

.footer_column .fe:after {
  content: "<a href='mailto:[email protected]'>[email protected]</a>";
  color: #333;
}
<li class="fe footer_no_link"></li>

.footer_column .fe a:after {
  content: attr(href);
  color: #333;
}
<li class="fe footer_no_link"><a href="mailto:[email protected]">[email protected]</a></li>

Upvotes: 0

Theo
Theo

Reputation: 41

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:

.mobile:after {
  content: 'Click here to email us.'
}
<p>This text is always here.</p>
<a class="mobile" href="mailto:[email protected]"></a>

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.

Upvotes: 4

TimPetricola
TimPetricola

Reputation: 1491

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/ ​

Upvotes: 4

etoxin
etoxin

Reputation: 5264

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.

Upvotes: 7

Deadlykipper
Deadlykipper

Reputation: 878

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/

Upvotes: 0

Curtis
Curtis

Reputation: 103348

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

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

http://jsfiddle.net/Cb2ry/

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

Upvotes: 3

Related Questions