CODEWITHSUNDEEP
cssurlhyperlinkhrefexternal
JamXBit
JamXBit

Reputation: 3

CSS: Style and color external links

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

a[href ^= "http"]:after {
     content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);    
}

Looks good, but i need to add red color too. How can i do that?

Upvotes: 0

Views: 342

Answers (1)

Ori Drori
Ori Drori

Reputation: 191986

You can use the same attribute select, and style the a element with red color:

a[href ^= "http"] {
  color: red;
}

a[href ^= "http"]::after {
     content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);    
}
<a href="/cats">Internal</a>

<a href="https://www.stackoverflow.com">Internal</a>

Upvotes: 1

Related Questions