CSS: Style Linki zewnętrzne

Chcę stylizować wszystkie linki zewnętrzne w mojej witrynie (Wordpress). Próbuję z: 

.post p a[href^="http://"]:after

Ale Wordpress umieścić cały adres url w linkach... Więc jak Mogę stylować wszystkie linki, które nie zaczynają się od http://www.mywebsite.com ?

Dziękuję.
Author: BoltClock, 2011-03-21
Source

5 answers

Używając specjalnej składni CSS możesz to łatwo zrobić. Oto jeden ze sposobów, który powinien działać zarówno dla protokołów HTTP, jak i HTTPS: 

a[href^="http://"]:not([href*="example.com"]):after,
a[href^="https://"]:not([href*="example.com"]):after{
    content: " (EXTERNAL)" 
}

Możesz zobaczyć przykład tego klikając tutaj .

 43
Author: Shaz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-28 18:05:08

W ten sposób wyświetlane są Linki zewnętrzne do Wikipedii: 

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

Przykład można znaleźć tutaj: http://jsfiddle.net/ZkbKp/

 10
Author: superlogical,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-29 10:08:10

Połączyłem @superlogical + @Shaz, aby zrobić coś dla mojego motywu WP Foundation...

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

Możesz użyć tego fragmentu HTML do przetestowania na swojej stronie: 

<a href="http://gebfire.com" target="_blank">External</a>

Jest to przykład pracy, spójrz powyżej, aby zmienić kolor na monochromatyczny


To jest to, czego użyłem do niestandardowego obrazu (jak favicon) 

a[href^="http://"]:not([href*="magew.com"]):after {
     content: " " url('/wp-content/uploads/2014/03/favicon.png');    
}

To jest przykład pracy, szukać favicon-zobaczyć go?

 4
Author: Uncle Iroh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-12 20:04:02

Jedna prosta zasada, bez użycia hardcodingu: 

a[href*="//"] { /* make me do stuff */ }

Działa na wszystkie schematy. Ma dodatkową zaletę w postaci identyfikowania błędnie wpisanych wewnętrznych adresów URL. W przypadku zamaskowanych linków wewnętrznych przekierowujących zewnętrznie, po prostu dodaj względny adres URL za pomocą //.

Podziękowania należą się Markowi Battistelli, który zostawił ten fragment na CSS-Tricks w 2012 roku.

Update: W oparciu o rzeczywiste użycie osobiście uważam powyższe za problematyczne, ponieważ stylizuje wszystkie bezwzględne linki, które mogą prowadzić do nieoczekiwana stylizacja w niektórych sytuacjach(np. w Brave, gdy pobierasz stronę do przeglądania w trybie offline). Proponuję użyć a[rel*="external"]::after zamiast tego i ozdobić swoje linki zewnętrzne.

 2
Author: Josh Habdas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-15 11:26:35

Załóżmy, że ustawiasz cel dla linków zewnętrznych przez <a href='http://' target='_blank'>Justin Bieber Fan Club</a> , Można grać:

CSS: 

a[target="_blank"]:after{
     content: " [external]" 
}
 0
Author: Andreson Tianth Lima,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-19 17:11:45