Indicators for External Links

[Dean5EA1]

For ADA compliance external links should have an indicator that the link is an external link, and will move the user off the current site. I do not see a reference on how to program this in RoboHelp 2020 or in prevsious discussions. Does anyone have a suggestion on how to include this indicator?

[Dean5EA1]

My first example did not work, see below.

[Amebr]

I did this in Classic with a very complex selector directly in the css file.

I can't give exact steps in RH2020 as I haven't inspected the output code to know exactly what is required based on the specific output being generated. 

Assuming that all external links start with http, you need to set up a hyperlink style that looks for hrefs begining with http and use the :after pseudo element to define the image.

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

https://developer.mozilla.org/en-US/docs/Web/CSS/::after

It'll look something like the following, but may need additional classes/elements depending on the RH2020 output. For example in Classic I needed to specify the class assigned to the topic content to prevent the image appearing on links in the skin.

a[href^='http']:after {
    content: url('relative/path/to/image.png');
}

[Amebr]

Adobe have advised that if you add the code below to the stylesheet used for your topics the icon will appear for external links in your topics and won't affect links in the skin.

If you do need the icon for links in your skin, you would need to add it to the LayoutDiff.css. You can find it by right-clicking on the skin and selecting Show in Explorer. (If the skin you are using doesn't have a LayoutDiff.css, you could try creating one with that name and seeing if the change showed up. Otherwise, create a css file called anything you want, then add the stylesheet in the User Assets section of the skin editor.)