href question for outlook email client

[Valentin-DanielSt]

Hi,

Has anyone encountered the following issue with the data-nl-type="externalLink" data-nl-link-perso-attr-href="#" tags?

After adding the link via the AC editor interface, AC added the two tags above to my code and broke the dark mode CSS style by adding semi-transparent black to the background of the AC text.

Do you know of a solution to fix this? I should mention that this only happens in the Classic version of Outlook Office 365 on Windows 10 in Dark Mode.

Thank you!

[Craig_Thonis]

Hi Valentin, 

This is more of an issue with the Outlook rendering engine than Campaign. That said, here is a similar post that may help.

https://experienceleaguecommunities.adobe.com/t5/adobe-campaign-standard/changing-hyperlink-color-in...

If that doesn't work, I'd recommend throwing your question into a search engine or AI, since this seems to be a common enough issue with Outlook and dark mode that there are a number of suggested solutions that may be applicable depending on your implementation.

Regards,

Craig

[Thanongdach]

Hi @Valentin-DanielSt 
Based on the issue described, this appears to be a problem with Outlook email client display in Dark Mode.
Problem Identified:

When adding links via AC (Adobe Campaign) editor, AC automatically adds data-nl-type='externalLink' and data-nl-link-perso-attr-href='#' tags
These tags break the Dark Mode CSS style by adding semi-transparent black background to the AC text
This issue occurs specifically in Classic version of Outlook Office 365 on Windows 10 in Dark Mode only

Recommended Solutions:

1. CSS Override for Dark Mode:

@media (prefers-color-scheme: dark) {
[data-nl-type="externalLink"] {
background: transparent !important;
background-color: transparent !important;
}
}

2.Use Outlook-specific CSS:

[owa] [data-nl-type="externalLink"],
[data-outlook-cycle] [data-nl-type="externalLink"] {
background: none !important;
background-color: transparent !important;
}

3.Fix at AC Template Level:

Add CSS in your email template to handle Adobe Campaign's automatic attributes

4. Alternative Approach:

Create links without using AC editor by writing HTML directly
Use custom CSS classes instead of automatic attributes

5.Report to Adobe:

Submit this issue to Adobe Support for a fix in the AC editor itself

This is a compatibility issue between Adobe Campaign's automatic attributes and Outlook Dark Mode rendering. The CSS solutions above should resolve the visual problem until Adobe addresses it in their editor.
Best Regards,
Thanongdach