1. home
  2. blog
  3. Стилизация внешних ссылок в CSS

Стилизация внешних ссылок в CSS

CSS

Поскольку открывать ссылку в новом окне плохой тон. А внешние ссылки могут увести пользователя навсегда. То будем предупреждать что ссылка открывается в новом окне. Рисуем пиктограмму nlink.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="55" height="47" version="1">
<g stroke="#000000">
  <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
   d="M41 29v8c0 4-4 8-8 8H9c-5 0-7-4-7-8V14c0-6 4-9 10-9h18"/>
  <path fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
   d="M53 17L37 2h16z"/>
  <path fill-rule="evenodd" stroke-width="3" d="M22 28l4 4L52 7l-4-4z"/>
</g></svg>

Дальше в стилях. Находим в параграфах все ссылки с href начинающийся на http и https и добавляем картинку.

p a[href^="http://"], p a[href^="https://"] {
    padding-right: 15px;
    padding-top: 13px;
    background-image: url(nlink.svg);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 13px 11px;
}

Комментарии ()