Nenhum produto encontrado nessa seleção.
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.
