Styling Email Link/Href="Mailto:" with CSS

Can I set subject/content of email using mailto:?

Yes, look all tips and tricks with mailto: http://www.angelfire.com/dc/html-webmaster/mailto.htm

mailto subject example:

<a href="mailto:no-one@snai1mai1.com?subject=free chocolate">example</a>

mailto link with HTML body

As you can see in RFC 6068, this is not possible at all:

The special <hfname> "body" indicates that the associated <hfvalue>
is the body of the message. The "body" field value is intended to
contain the content for the first text/plain body part of the
message. The "body" pseudo header field is primarily intended for
the generation of short text messages for automatic processing (such
as "subscribe" messages for mailing lists), not for general MIME
bodies.

Styling email links in CSS

a[href^="mailto:"] {
   ...
}

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/

Insert a line break in mailto body

I would suggest you try the html tag <br>, in case your marketing application will recognize it.

I use %0D%0A. This should work as long as the email is HTML formatted.

<a href="mailto:email@mycompany.com?subject=Subscribe&body=Lastame%20%3A%0D%0AFirstname%20%3A"><img alt="Subscribe" class="center" height="50" src="subscribe.png" style="width: 137px; height: 50px; color: #4da6f7; font-size: 20px; display: block;" width="137"></a>

You will likely want to take out the %20 before Firstname, otherwise you will have a space as the first character on the next line.

A note, when I tested this with your code, it worked (along with some extra spacing). Are you using a mail client that doesn't allow HTML formatting?

React open mailto E-Mail client onClick with body from textarea

I ended up creating a component similar to what @GitGitBoom suggested in the comments.

Here for future Seekers:

import React from "react";
import { Link } from "react-router-dom";

const ButtonMailto = ({ mailto, label }) => {
    return (
        <Link
            to='#'
            onClick={(e) => {
                window.location.href = mailto;
                e.preventDefault();
            }}
        >
            {label}
        </Link>
    );
};

export default ButtonMailto;

Use it like this:

<ButtonMailto label="Write me an E-Mail" mailto="mailto:no-reply@example.com" />

Protect e-mail address with CSS only

It's very simple. You can protect your email address with only HTML & CSS. You don't need to know about PHP or Java script. Try below code.

Simple HTML and CSS code:

<!doctype html>
<html>
<head>
    <title>Protect e-mail with only css</title>
    <style type="text/css">
        .e-mail:before {
            content: attr(data-website) "\0040" attr(data-user);
            unicode-bidi: bidi-override;
            direction: rtl;
        }
    </style>
</head>
<body>

<span class="e-mail" data-user="nohj" data-website="moc.liamg"></span>

</body>
</html>

Output of above code:

jhon@gmail.com

Please note:

Here I'm just used two extra attributes.

1) data-user write your e-mail id user name in reverse.

2) data-website write your e-mail id website in reverse.