Правильный способ брать ссылки в кавычки

[mavsic]

В блоге Ильи Бирмана была опубликована заметка о способах оформления ссылок, заключенных в кавычки. Реализация того способа, который Илья называет правильным, на его собственном сайте очень проста: ссылки по умолчанию не подчеркнуты, внутри тега <a> принудительным образом подчеркивается только текст без кавычек:

<a href="iscroll/" class="nou">«<u>Айскрол</u>»</a>

Я счел это решение не слишком изящным и решил попробовать написать свой собственный способ. Мое решение было использовать псевдоклассы :before и :after, а также свойство content.

a
{
	color: Blue;
}

a:hover
{
	text-decoration: none;	
}

a.quoted
{
}

a.quoted:before
{
	content: "\00ab";
	text-decoration: none;
}

a.quoted:after
{
	content: "\00bb";
	text-decoration: none;
}

А вот HTML:

Материал для этой статьи взят из <a class="quoted" href="http://ru.wikipedia.org">Википедии</a>, свободной энциклопедии.

Во всех браузерах, поддерживающих указанные средства CSS, я вижу следующую картину:

То есть кавычки по-прежнему подчеркнуты! При наведении мыши, как и предполагалось, подчеркивание убирается. Я также пробовал вместо подчеркивания использовать border-bottom: solid 1px Blue, а для a.quoted:before и a.quoted:after указывать border-bottom: none, но также безрезультатно. Есть ли у вас какие-нибудь идеи, с чем связано подобное поведение? Возможно, оно является нормальным, я не часто работаю с :before и :after и, возможно, упускаю какие-нибудь важные моменты. В таком случае, подскажите, пожалуйста, возможные альтернативные решения этой проблемы.

Надеюсь на вашу помощь.

[rash]

Используйте способ Бирмана.

Он хороший. Сначала мне тоже не понравился, но потом я понял, что он обеспечивает наименьшее количество костылей.

А подчеркивание ссылки у вас просто наследуется генерируемым контентом, ничего с этим не поделать. Нужно задавать подчеркивание для элемента, вложенного в a, а кавычки генерировать для самого элемента a. Что, собственно, у Бирмана и сделано.

[mavsic]

Ясно, так и сделаю!

[rash]

Вот еще как вариант:

		a {
			text-decoration: none;
			border-bottom: 1px solid #ccc;
			}
		a:before {
			content: "«";
			border-bottom: 1px solid #fff;
			}
		a:after {
			content: "»";
			border-bottom: 1px solid #fff;
			}

Но мне этот способ нравится меньше, чем использование нормального подчеркивания для текста.