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.
It really is that simple.
Previously have been a number of issue with support for
display:none;. For example when tested in October 2019 Mail.ru would hide content from the preheader as well as the email when set to
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
﻿͏ between them, like this
﻿͏  ﻿͏  ﻿͏  ﻿͏. Just add as many as you need to fill up the space (this could be as much as 100-200)
Previously I recomended using
͏ but it apears that stopped working in Yahoo and AOL at some point late in 2022 and stopped working in Applemail 16.4 Beta (March 2023). If you want to know more, I’ve gone into a more detail on this issue on the Parcel Blog Preheader spacing.
I’ve seen emails also use
‌ but from my tests those don’t add any space on mail.ru.
Plain text preheader
Some email apps pulls in the preheader content from the plain text version of the email. Including
- GMX on Android
- Web.de on Android
- Mail.com on Android
- 1&1 on Android
- K-9 on Android
Often the plain text version is auto generated by your ESP if this version is generated with
͏ rather than the characters they represent then they will show in the preheader. If this happens you can copy and paste the character into your plain text version, however this will show in the plain text version of your email.