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.
