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.
If you don’t have to consider mail.ru you can use a simpler version of this code
The mail.ru email client won’t show text in the preheader if it’s set to
visibility: hidden, or has a
hidden attribute. It will just jump to the first piece of visible content.
To get this working in mail.ru but still hidden from email clients we set the div to not take up any height space, and to hide the content that would overflow
max-height:0;overflow:hidden;. Then for MSO Outlook we can use the specific MSO code
mso-hide:all;. And finally as we want this code to be hidden in the email, we also want it hidden for screen readers so we add
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. People also use
‌ but from my tests those don’t add any space on mail.ru, but if
͏ is giving you issues these may be worth a try.
The GMX app pulls in preheader content from the plain text version of the email. 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 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.