This is a text snippet that appears under the subject line in the inbox but is hidden from the main email content when it’s opened.

The code

<div style="display:none">
  Preheader text...

It really is that simple.

Previously have been a number of issue with support for display:none;. For example when tested in October 2019 would hide content from the preheader as well as the email when set to display:none, visibility:hidden, or using a hidden attribute. And I was recommending using <div style="max-height:0;overflow:hidden;mso-hide:all;" aria-hidden="true"> but that appears to be fixed now (July 2020), so we can just use the simplified version.

Preheader spacing hack

If you want to use a short preheader then the rest of the space of the preheader will pull in content from the rest of your email. To stop this happening we can fill the remaining space with… spaces. For this just add a number of spaces with &#847; between them, like this &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;. Just add as many as you need to fill up the space. People also use &zwnj; or &#8204; but from my tests those don’t add any space on, but if &#847; is giving you issues these may be worth a try.

Plain text preheader

Some email apps pulls in the preheader content from the plain text version of the email. Including

Often the plain text version is auto generated by your ESP if this version is generated with &#847; rather than the characters they represent then they will show in the preheader. If this happens you may need to copy and paste the character into your plain text version. You can copy the Combining Grapheme Joiner on unicode-table, remember to put a space between each time you paste it.