Lägg till en ikon för externa länkar med ett enkelt CSS-trick.

Av olika anledningar vill man ibland undvika target="_blank" på sina länkar för att öppna dem i nytt webbläsarfönster. Då kan det vara en bra idé att markera sina länkar med en liten ikon för att tala om att man lämnar sidan man är på.

Detta görs ofta med en liten pil;

Pil

eller en kedjelänk;

Länk

Attribute selectors

Här är ett bra sätt att i CSS markera externa länkar. Använd CSS Attribute Selector [href^="http"] för att hitta alla länkar på sidan som innehåller “http” som i de flesta fall bara används i externa länkar.

Vi måste också leta efter länkar som innehåller https och då kan vi använda oss av multiple CSS attribute selectors så här: [href^="http"][href^="https"].

CSS

1
2
3
4
a[href^="http"][href^="https"] {
  background: url(external-link-icon.png) no-repeat right;
  padding-right: 20px; /* Padding beror på storleken på ikonen */
}