Цвет подчеркивания CSS без границ

Question

Я пытаюсь стилизовать ссылку внутри списка и из-за того, как у меня работают другие стили, я не могу использовать border-bottom: 1px solid #0da4d3, Теперь я сделал некоторые исследования и нашел text-decoration-color но это только для Firefox, поэтому он не будет работать для меня.

Я ищу способ изменить цвет подчеркивания, который будет работать в 5 основных браузерах (я могу жить без IE). Есть ли способ, которым я могу сделать это? Я также открыт для любого добавленного HTML или JavaScript.

Это скрипка того, что я сейчас получил: http://jsfiddle.net/yhqf5z2n/

Answer 1

Если вы открыты для добавления HTML-разметки, вы можете изменить цвет подчеркивания ссылки следующим образом:

DEMO

HTML:

<a href="#"><span>Link</span></a>

CSS:

a{
    text-decoration:underline;
    color:red;
}
a>span{
    color:green;
}

Answer 2

Это не совсем то, что я хотел, но играть с box-shadow Я нашел довольно крутой эффект (он анимирован на WordPress), который я собираюсь придерживаться.

box-shadow: inset 0 -7px 0 0 #0da4d3;

Скрипка: http://jsfiddle.net/yhqf5z2n/1/

Answer 3

Там нет другого способа, чем с помощью border-bottom, Вы можете использовать псевдоэлемент и дать ему border-bottomили вы также можете использовать box-shadow:inset...

Проверьте эту скрипку: псевдоэлементы