Изменить цвет подчеркивания ссылки, а не цвет шрифта (нижняя граница работает не во всех браузерах)

Question

Изменение атрибута border-bottom вместе с удалением украшения текста создает цветное подчеркивание в некоторых браузерах (я могу ручаться за FF 5 и 6 точно).Но другие браузеры (по крайней мере, Safari и Chrome) не отображают никаких строк.

Пример проблемы см. На utsarotaract.org (в нижнем абзаце страницы указателя есть ссылка).

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

Answer 1

Проблема в размере вашей границы. Вместо этого поменяйте границу 0.5px на 1px, и она будет работать. Живой пример: http://jsfiddle.net/tw16/WcrNA/

.content a {
    border-bottom: 1px solid #A80532; /* instead of 0.5px */
    color: #000022;
    text-decoration: none;
}

Answer 2

Вы можете использовать:

<a><span>I'm a link</span></a>

со следующим CSS:

a {
  color: blue;
}
span {
  color: green;
}

Альтернативой является использование границы внизу. Это также кросс-браузерное решение. Вам просто нужно установить его отступ / margin / line-height, чтобы согласовать его из браузера в другой.