Enable email in CSS using CSS or jQuery that is using a pseudo element instead of an element in the DOM

Question

So I cannot just add a mail to :

.SPA-notRight:after {
    content: 'contact us: me@email.com';
    visibility: visible;
    display: block;
}

<div class="SPA-notRight">
<p>Something not right?</p>

hyperlink to this css code. IS there a way to make this go to a hyperlink or an email?

Not using CSS, no. CSS is for styling purposes, not amending the DOM or user actions — Rory McCrossan, Jan 24 '18 at 13:27
No. Pseudo elements like `after` are not part of the actual [DOM](https://www.w3schools.com/js/js_htmldom.asp). — NullDev, Jan 24 '18 at 13:28
jQuery could be used to achieve what you want, but not in this way — Rory McCrossan, Jan 24 '18 at 13:29
Possible duplicate of [Insert a Link Using CSS](https://stackoverflow.com/questions/165082/insert-a-link-using-css) — VXp, Jan 24 '18 at 13:55

score 1 · Accepted Answer · answered Jan 24 '18 at 13:37

In CSS it is not possible. after is a pseudo element and therefore not part of the actual DOM.

However, since your question is tagged with jQuery as well, why not just append the email to your div?

$(document).ready(function(){
    $(".SPA-notRight").append('Contact us: <a href="mailto:me@email.com">me@email.com</a>');
});

Demo:

$(document).ready(function(){
    $(".SPA-notRight").append('Contact us: <a href="mailto:me@email.com">me@email.com</a>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="SPA-notRight">
    <p>Something not right?</p>
</div>

Enable email in CSS using CSS or jQuery that is using a pseudo element instead of an element in the DOM

1 Answers1