CSS After Element to Insert Mailto Link

CSS After Element to insert mailto link?

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

Is it possible to have a hyperlink inside {content:...}?

There is no solution for this with css. anything inside content will not be html markup, its only text. so you could probably add an html element on hover which links to another url. for example http://jsfiddle.net/naeemshaikh27/1ysyr0tb/2/

$(function(){
    $('#HPV').hover(function(e){
       $(this).append('<a href="google.com">click me</a>');;
    },function(){

    });
});

can I add a href link with the :before or :after content in CSS?

The content you add with the pseudo-elements like :before and :after don't appear in the DOM. Therefore you can't add HTML with the CSS content property.

You can only add text with content.

Possible to make a:after/before pseudo elements clickable as part of the link?

It looks like you have discovered a bug in the browser you are using.

Based on the spec, the generated content should be treated as a child of the element it is being generated for. I created a JSFiddle to test this out, and the generated text is linked for me in most browsers (Chrome 13 being the solitary exception.) My guess is that you are testing in Chrome. This is a reproducible bug.

The workaround is to simply specify a background color on your links ... if you want to be able to use this for all links, declaring a background image (but not specifying an image, or using a transparent .gif - or as just pointed out, setting opacity to anything other than 1) works.

How to add ::after in the HTML link tag

Basically for the :after element to work or be present, the entire selector should be matched. In the below snippet you can see how only the a element which is a descendant of .wrapper element or a descendant of footer.main-footer element gets the :after element. The other a which is outside both the div.wrapper and footer.main-footer does not get the :after element.

Another thing to note is that pseudo-elements are generated only if content property is specified. So, in the below snippet, the :after element is generated only when the a is hovered.

.wrapper a:hover:after,footer.main-footer a:hover:after {  background: #ff0000;}/* just for demo */
.wrapper,footer {  position: relative;  height: 40px;}.wrapper a:hover:after,footer.main-footer a:hover:after {  position: absolute;  content: ''; /* this is important */  height: 100%;  width: 100%;  left: 0px;  top: 0px;  z-index: -1;}

<div class='wrapper'>  <a href="test.com" data-term="event">Event::after</a></div><footer class='main-footer'>  <a href="test.com" data-term="event">Event::after</a></footer>
<a class="back-to-portfolio" href="test2.com">All</a>

Hyperlink in ::after in HTML

No, it’s not possible. Generated content can only take the form of either static text or static image content, and not entire DOM elements.

Nor is this the kind of thing ::after is meant to be used for. There is no reason not to mark up a hyperlink within your document, since you're expressing a link between this document and some other document.

Insert anchor link in :after selector content

You need javaScript for this kind of things.

It can easily be done with jQuery. DEMO

HTML

<p id="p">Blah Blah Blah I'm some content</p>

jQuery

var plink ='- <a href="http://www.stackoverflow.com">Learn More</a>';
$('#p').append(plink);

---

Related Topics