All geek questions in one place

Link Style for External Link

I'm going to apply the link style to my site, so the external links will have an icon next to it, however, I have a problem when the link image of the footer also changed when applied, if there is a way to avoid this?

CSS

a[href^="http://"] { 
background: url( https://www.clearinghouseforsport.gov.au/__data/assets/image/0009/643176/icon_external.gif ) center right no-repeat;
padding-right: 16px;
}
+4
source share
2 answers

I think it is impossible to assign a selector to the parent base in its children, check this answer in SO Apply CSS styles to the element depending on its children . you want to apply to all <a>link</a>but exclude <a><img src='' /></a>that impossible

but you can try, possibly do:

a[href^="http://"] {
  /*do your stuff*/
}

a[href^="http://"] img {
 background: none; /*remove background*/
}

. btw, https://

+1

UPDATE

:

  • <head></head>...
  • ... : styles.css.
  • "" , #navigation...
  • , .

  • HTML-:

    <style>
  #navigation a::after {
     content: url(https://www.clearinghouseforsport.gov.au/__data/assets/image/0009/643176/icon_external.gif);
     position: relative;
     top: 5px;
     left: 3px;
  }
</style>

    : : a.navmenuitem::after

PLUNKER

OLD

. HTML , . , , , :

footer a { background:none !important; }


footer a[href^="http://"]  { background: url(https://cdn1.iconfinder.com/data/icons/web-page-and-iternet/90/Web_page_and_internet_icons-14-128.png) no-repeat 20px 20px;

SNIPPET

a[href^="http://"] {
  background: url(https://www.clearinghouseforsport.gov.au/__data/assets/image/0009/643176/icon_external.gif ) center right no-repeat;
  padding-right: 16px;
  margin: 10px;
}
footer a[href^="http://"] {
  background: url(https://yourescape.ldara.com/_resources/images/content/icon_link.png) center right no-repeat;
  padding-right: 20px;
}
<header>
  <nav>
    <a href="http://example.com/">NAV</a>
    <a href="http://example.com/">NAV</a>
    <a href="http://example.com/">NAV</a>
    <a href="http://example.com/">NAV</a>
  </nav>
</header>
<section>
  <aside>
    <a href="http://example.com/">ASIDE</a>
    <a href="http://example.com/">ASIDE</a>
  </aside>
</section>
<footer>
  <a href="http://example.com/">FOOTER</a>
  <a href="http://example.com/">FOOTER</a>
</footer>
Hide result
0

Source: https://habr.com/ru/post/1661530/

More articles:


All Articles