cssurlcss-selectorsurihref

CSS: Style external links


I want to style all external links in my website (Wordpress). I'm trying with:

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

But Wordpress put the entire url in the links... So, how could I style all links that doesn't start with http://www.mywebsite.com ?

Thank you.


Solution

  • 2021 Solution

    a[href]:not(:where(
      /* exclude hash only links */
      [href^="#"],
      /* exclude javascript only links */
      [href^="javascript:" i],  
      /* exclude relative but not double slash only links */
      [href^="/"]:not([href^="//"]),
      /* domains to exclude */
      [href*="//stackoverflow.com"],
      /* subdomains to exclude */
      [href*="//meta.stackoverflow.com"],
    )):after {
      content: '↗️';
    }
    <strong>Internal sites:</strong>
    <br>Lorem <a href="http://stackoverflow.com">http://stackoverflow.com</a> ipsum
    <br>Lorem <a href="/a/5379820">/a/5379820</a> ipsum
    <br>Lorem <a href="//stackoverflow.com/a/5379820">//stackoverflow.com/a/5379820</a> ipsum
    <br>Lorem <a href="http://stackoverflow.com/a/5379820">http://stackoverflow.com/a/5379820</a> ipsum
    <br>Lorem <a href="https://stackoverflow.com/a/5379820">https://stackoverflow.com/a/5379820</a> ipsum
    <br>Lorem <a href="https://meta.stackoverflow.com/">https://meta.stackoverflow.com/</a> ipsum
    <br>Lorem <a href="ftp://stackoverflow.com">ftp://stackoverflow.com</a> ipsum
    
    <br><br>
    <strong>External sites:</strong>
    <br>Lorem <a href="ftp://google.com">ftp://google.com</a> ipsum
    <br>Lorem <a href="https://google.com">https://google.com</a> ipsum
    <br>Lorem <a href="http://google.com">http://google.com</a> ipsum
    <br>Lorem <a href="https://www.google.com/search?q=stackoverflow">https://www.google.com/search?q=stackoverflow</a>
    <br>Lorem <a href="//www.google.com/search?q=stackoverflow">//www.google.com/search?q=stackoverflow</a>
    
    <br><br>
    <strong>Other anchor types</strong>
    <br>Lorem <a>no-href</a> ipsum
    <br>Lorem <a href="#hash">#hash</a> ipsum
    <br>Lorem <a href="javascript:">javascript:</a> ipsum

    2014 Solution

    Using some special CSS syntax you can easily do this. Here is one way that should work for both the HTTP and HTTPS protocols:

    a[href^="http://"]:not([href*="stackoverflow.com"]):after,
    a[href^="https://"]:not([href*="stackoverflow.com"]):after {
      content: '↗️';
    }