• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как добавить значок для внешних ссылок (Разное оформление внутренних и внешних ссылок через CSS)
Как добавить значок для внешних ссылок
Kosten
Дата: Пятница, 2019-08-16, 21:47 | Сообщение 1
Оффлайн
Администраторы
Сообщений:24628
Награды: 57


Давайте сразу обозначим, что все внешнее ссылки, что находятся на любом сайте, то они однозначно ведут на другой сайт. И вот к этой ссылке или ключевому слову, что находится под ссылка под переход, мы добавим изображение или значок, который по своим масштаб будет в несколько пикселей, и за основу возьмем простую стрелку, которая многим привычно видеть за обозначение для перехода.

Здесь нужно подметить на счет адресов сайта, которые начинается с протокола http:// или https://, где можно прописывать адрес без указания протокола //. Как можно заметить, что все адреса интернет ресурсов и блогов содержат две косые черты, что указываем в селекторе следующим образом.

Код
a[href*=//] { … }

Где будет считываться следующим образом, это примененный стиль к элементам a, у которых атрибут href содержит //.

Так получиться:



HTML

Код
<a href="#">ZorNet.Ru — с простой ссылкой</a>
<a href="http://zornet.ru/">ZorNet.Ru — с внешнее ссылкой</a>

CSS

Код
    background: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/blank.png) no-repeat 0 50%; /* Параметры картинки */
    padding-left: 13px; /* Расстояние слева */
   }

Значок расположен по левую сторону, это не говорит о том, что так только можно, ведь его и по правую аналогично перенести не сложно, где все корректно показывает.

Демонстрация

Также рекомендую посмотреть похожи статьи применение по внешним ссылкам:

1. Оформление внешних ссылок иконкой на CSS
2. Оформление ссылок в CSS с разными цветами
3. Сделать красивое оформление ссылки на CSS
Прикрепления: 0464535.png(8.6 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как добавить значок для внешних ссылок (Разное оформление внутренних и внешних ссылок через CSS)
  • Страница 1 из 1
  • 1
Поиск: