Как администратор сайта, хочу иметь полный контроль над ссылками, как в собственных записях, так и в комментариях. Для этого я ввел следующие правила CSS:
a[rel=nofollow]:after { color: #c00; content: '≠'; } a[target=_blank]:after { color: #c00; content: '⇒'; } a[target=_blank][rel=nofollow]:after { content: '≠⇒'; }
"_blank" позволяет мне видеть ссылки, которые открываются в новом окне, "nofollow
" - ссылки с атрибутом rel="nofollow"
(закрытые от передачи веса страницы).
Интересен факт, что когда на ссылке установлены оба атрибута, к примеру:
<a title="LinuxMint" href="http://linuxmint.com/" rel="nofollow" target="_blank">LinuxMint</a>
то, видимо в связи с новой версией Google Chrome, отображается только значок "⇒", а уже после наведения курсора на ссылку появляется 2-й "≠" и тогда они видны оба "≠⇒". К сожалению, это крайне неудобно, так как при написании записи я по-умолчанию ставлю внешние ссылки на открытие в новом окне и закрываю от индексации. Я уже было думал, что у меня ошибка в JS на горячие клавиши в редакторе WordPress, потому что при установке атрибута rel="nofollow"
значок не появлялся. Проблема оказалась именно в обработке этого правила CSS, которое ранее отлично работало.
Решение
Попробовал изменить "nofollow
" псевдоэлемент на :before
, не помогло. Тогда подумал, что раз не получается, выделю внешнюю ссылку цветом. По непонятной причине, как только я задал цвет элементу "_blank
", все заработало, стали отображаться сразу оба значка без скачков.
Конечный CSS:
a[rel=nofollow]:after { color: #c00; content: '≠'; } a[target=_blank] { color: #353535; } a[target=_blank]:after { color: #c00; content: '⇒'; } a[target=_blank][rel=nofollow]:after { content: '≠⇒'; }