Оформление гиперссылок, открывающихся в новой вкладке

На этот раз речь пойдёт об оформлении ссылок, имеющих атрибут target="_blank".

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

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

Итак, ближе к телу. Самым первым приходящим на ум решением, как же нам выделять ссылки с атрибутом target="_blank", является введение отдельного CSS стиля:

a.blank {font-weight:bold}

В этом случае мы просто ручками добавим класс blank к нужным гиперссылкам, отчего те приобретают полужирное начертание.

Но это решение не годится, поскольку предполагает ручную расстановку стилей. Поэтому рассмотрим вариант, основанный на CSS-селекторах атрибутов и псевдоэлементов.

Сделаем так, что все ссылки с атрибутом target="_blank" автоматически будут иметь подчеркивание и полужирное начертание. Кроме того, после ссылки будет указан текст (откроется в новой вкладке).

Пример такой ссылки: Студия загара "SunLife"

Исходный код этого примера:

<style>
    a[target="_blank"] {text-decoration:underline; font-weight:bold}
    a[target="_blank"]:after {content:" (откроется в новой вкладке)"}
</style>

<p>
    Пример такой ссылки: <a target="_blank" href="https://zagarrostov.ru/">Студия загара "SunLife"</a>
</p>

Посмотрите пример указания пиктограмки для внешних ссылок