CSS3 Logo

Provavelmente você já deve ter visto que alguns sites estilizam os links externos (links que não são do seu site) de maneira diferente dos links internos. Isso é legal para o usuário final, pois ele pode saber qual link vai sair do site em que ele está, e qual aponta para outro artigo do mesmo site.

Nesse artigo vou deixar uma dica bem rápida para estilizar links externos com CSS utilizando o seletor {php}:not{/php}.

Vamos lá.

Como estilizar links externos com CSS

Primeiramente faça a configuração do seu texto e links da maneira que preferir, por exemplo:

*, *:after, *:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: 'Titillium Web', sans-serif;
  font-size: 18x;
  font-weight: 400
}
.text{
  max-width:80%;
  margin: 0 auto;
  padding: 20px;
}
.text p {
  margin: 1.6em 0;
}

a {
  color: #2979ff;
  text-decoration: none;
}
a:hover {
  color: #4672bd;
  text-decoration: underline;
}

Agora para estilizar os links externos, simplesmente adicione:

a:not([href*="todoespacoonline.com/w"]) {
  color: #c93900;
  margin-left: 5px;
  padding-left: 15px;
  background: url(https://www.todoespacoonline.com/w/wp-content/uploads/2014/08/icon_external_link2.gif) center left no-repeat;
}

Troque todoespacoonline.com/w pelo endereço do seu site e pronto.

Se não estiver familiarizado com o seletor :not, acesse o link abaixo para maiores informações:

Se quiser adicionar um evento "hover", faça o seguinte:

a:not([href*="todoespacoonline.com/w"]) {
  color: #c93900;
  margin-left: 5px;
  padding-left: 15px;
  background: url(https://www.todoespacoonline.com/w/wp-content/uploads/2014/08/icon_external_link2.gif) center left no-repeat;
  transition: all 100ms ease-in-out;
}
a:not([href*="todoespacoonline.com/w"]):hover {
  color: #000;
  text-decoration: none;
  background: url(https://www.todoespacoonline.com/w/wp-content/uploads/2014/08/icon_external_link2.gif) top left no-repeat;
}

Veja uma demonstração de como funciona:

CodePen

Simples assim!

Espero que goste.