CSS: Style external links

Question

I want to style all external links in my website (Wordpress). I\'m trying with:

.post p a[href^=\"http://\"]:after

But Wordpress put the entire

Answer 1

I like the approach @henryscat shared, but not being an SVG expert I struggled to change the icon. To make it easier for me, I removed the mask and created the icon using lines only. The comment in front of the icon definition describes which is which part of the icon.

a[target="_blank"]::after {
    content: '';
    background: no-repeat var(--icon-external-link);
    padding-right: 1em;
}

:root {
    /*
    line left
    line right
    line bottom
    line top
    arrow left
    arrow right
    arrow diagonal
    */
    --icon-external-link: url('data:image/svg+xml,\
    ');
}