Стилизация ссылок CSS

Question

Товарищи!

Нужно стилизовать внешние ссылки таким образом, чтобы в конце их добавлялась иконка. Всё как бы работает. Но, мне нужно, чтобы на один сторонний ресурс иконка не добавлялась:

    a[href^="http://"]:not([href*="mysite.org"]):after,
    a[href^="https://"]:not([href*="mysite.org"]):after,
    a[href^="//"]:not([href*="mysite.org"]):after,
    a[href^="http://"]:not([href*="creativecommons.org"]):after,
    a[href^="https://"]:not([href*="creativecommons.org"]):after,
    a[href^="//"]:not([href*="creativecommons.org"]):after {
        content: url(../../img/elink.svg);
    }

Вроде бы всё логично. Тем не менее, иконка таки добавляется. Чего я делаю не так?

Неужели никто не сталкивался с подобным?

Answer 1

mysite.org подходит под селектор :not([href*="creativecommons.org"]) и наоборот, creativecommons.org подходит под :not([href*="mysite.org"]) они взаимно срабатывают друг на друге. Чтобы этого не случалось, нужно одновременно исключить и то, и другое.

a { display: block; }

a[href^="http://"]:not([href*="mysite.org"]):not([href*="creativecommons.org"])::after,
a[href^="https://"]:not([href*="mysite.org"]):not([href*="creativecommons.org"])::after,
a[href^="//"]:not([href*="mysite.org"]):not([href*="creativecommons.org"])::after {
  content: url('https://gyazo.com/152639e8b917f68ca6b16d3ccb5f249d.png');
}

<a href="http://mysite.org">mysite.org</a>

<a href="http://creativecommons.org">...org</a>
<a href="https://creativecommons.org">...org</a>
<a href="//creativecommons.org">...org</a>

<a href="https://ru.stackoverflow.com/">test</a>
<a href="https://stackoverflow.com/">test</a>

А разумнее будет разделить их:

a { display: block; }

a[href^="http://"]::after,
a[href^="https://"]::after,
a[href^="//"]::after {
  content: url('https://gyazo.com/152639e8b917f68ca6b16d3ccb5f249d.png');
}

a[href*="mysite.org"]::after,
a[href*="creativecommons.org"]::after {
  content: "";
}

<a href="http://mysite.org">mysite.org</a>

<a href="http://creativecommons.org">...org</a>
<a href="https://creativecommons.org">...org</a>
<a href="//creativecommons.org">...org</a>

<a href="https://ru.stackoverflow.com/">test</a>
<a href="https://stackoverflow.com/">test</a>

БЛОГ НА HUSL

Стилизация ссылок CSS

Ответы (1 шт):