Непонятная обработка псевдоэлемента CSS :after в Chrome

Ноябрь 13, 2012

Как администратор сайта, хочу иметь полный контроль над ссылками, как в собственных записях, так и в комментариях. Для этого я ввел следующие правила 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: '≠⇒';
}

Запись опубликована Вторник, Ноябрь 13, 2012 в 20:15 и находится в CSS . Вы можете следить за ответами к этой записи через RSS 2.0 ленту. Вы можете оставить комментарий, или обратиться к записи со своего сайта.

Оставить Комментарий

*