So soll der Link mit dem Kennzeichen für das Öffnen in einem anderen Fenster aussehen.
/* Symbol für externen Link automatisch anzeigen */
a[target="_blank"]:after {
content: '';
width: 1.5em;
height: 1.2em;
display: inline-block;
overflow: hidden;
background-image: url(dashicon-external.svg); /* externe SVG-Datei im Verzeichnis der CSS-Datei */
background-repeat: no-repeat;
/*background-size: 0.8em 0.8em;*/
background-position: right bottom;
color: rgba(255, 0, 0, 0);
}Der externe Link wird an dem “target”-Attribut des <a>-Tags erkannt.
Die externe SVG-Datei sieht wie folgt aus:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
version="1.1"
id="svg8">
<defs
id="defs12" />
<rect
x="0"
fill="none"
width="20"
height="20"
id="rect2" />
<g
id="g6">
<path
d="M9 3h8v8l-2-1V6.92l-5.6 5.59-1.41-1.41L14.08 5H10zm3 12v-3l2-2v7H3V6h8L9 8H5v7h7z"
id="path4"
style="fill:#ff0000;fill-opacity:1" />
</g>
</svg>
Soll das Symbol in einer anderen Farbe angezeigt werden, muss Zeile 20 hinter “fill” der Farbcode angegeben werden. In dem Beispiel oben ist das Symbol rot.