Add external link icons to all external links with CSS

[trevorlang]

Use a CSS selector to add an external link icon to all external links.

[m-mohr]

We need to be careful here. We don't know the domain in advance, so can only check for external links with absolute vs. relative. And additionally, we either need to remove the external link icon from the StacLink component or somehow handle it in CSS that it doesn't appear twice for them.

[m-mohr]

I just experimented with this, but this is even more complicated due to the way Bootstrap is styling some links.

For example, the provider list with links in block style and badges included show up like this:

The CSS used as an example:

    a[href*="://"]::after {
        content: "";
        width: 11px;
        height: 11px;
        margin-left: 4px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        display: inline-block;
    }

Right now I'm a bit leaning towards removing the external link icon from where it appears already until we have good solution for all cases. What I could do more easily to add a specific styling only to internal links in the link list (and not to cards). But I can't find a good icon yet. (Maybe an arrow to the right or the signpost.)

For the link list an alternative approach would be to split the list into external and internal links (using the mechanism used in the method isStacBrowserLink in the component StacLink.

[m-mohr]

We won't provide a way to distinguish internal and external links for now. This is too error prone with links coming from different sources and renderers in various styles.