Skip to content

Instantly share code, notes, and snippets.

@kbav
Created November 21, 2012 17:36
Show Gist options
  • Save kbav/4126337 to your computer and use it in GitHub Desktop.
Save kbav/4126337 to your computer and use it in GitHub Desktop.
HTML Email Hidden Preheader
<style>
/* ... */
/*--- Preheader declaration in style block in addition to inline for Outlook */
.preheader { display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0; }
</style>
</head>
<body>
<!-- PRE-HEADER TEXT -->
<span class="preheader" style="display: none !important; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">Preheader text shows up in GMail, iOS, Mail.app, &amp; more: 75 text char limit</span>
...
@afalchi82
Copy link

Did you test this?

@Repox
Copy link

Repox commented Apr 15, 2014

This doesn't work very well - tested in Litmus.

@ericlepetit
Copy link

I use this. Late in the game but hope that helps:

<td style="display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0; mso-hide:all; line=height:0px; font-size:0px">Your preheader here</td>

Tested in Litmus. Works for me.

Note: I wrap the preheader into a <td> instead of using <span> as <span> seems to increase the Spam Assassin score (https://www.campaignmonitor.com/forums/topic/8131/hidden-preheader-span-scores-20-points-with-spamassassin/)

@kbav
Copy link
Author

kbav commented Oct 7, 2015

☝️ @ericlepetit has got it. Use that everybody!

I'll edit my code and test when I get a chance...busy season...

@CEscorcio
Copy link

Can´t make it work in Gmail

@iamwerby
Copy link

iamwerby commented May 9, 2019

Here's the one I use, works perfectly:

<span class="preheader" style="color: #f3f3f3; display: none !important; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; mso-hide: all !important; opacity: 0; overflow: hidden; visibility: hidden;">Preheader text</span>

@maitrungduc1410
Copy link

This works for me, prepend this to body before sending out email:

<!-- Visually Hidden Preheader Text : BEGIN -->
        <div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;">
            Some preview Text
        </div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment