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.