Изменение цвета ссылки

Ответ 1

Если вы имеете в виду другой цвет подчеркивания, чем текст, единственное, что я могу придумать, это добавить диапазон по ссылке:

<span class='underline'>
    <a href="#">this just<br>a test<br>of underline color</a>
</span>

И затем CSS:

span.underline { 
    color: red; 
    text-decoration: underline; 
} 
span.underline a { 
    color: blue; 
    text-decoration: none; 
} 

И вы получите то, что хотите.

ИЗМЕНИТЬ

Тестирование этого немного дальше, это не работает для меня в IE. Тем не менее, если вы добавляете border-bottom, это удивительно работает во всех браузерах, за исключением того, что IE не помещает границу под последним. Я попытаюсь копать немного глубже, чтобы увидеть, есть ли кросс-браузерный способ сделать это...

Ответ 2

Ответ Паоло Бергантино, похоже, не работал у меня в Chrome OSX (v19.0.1084.56). Однако перемещение диапазона внутри тега показало, что это трюк.

HTML

<a class="underline" href="#">
    <span>Hello world<br />this is a test<br />of changing the underline colour</span>
</a>​

И CSS

.underline{
    color: red;           
}

.underline span{
    color: gray;           
}

Вы можете посмотреть его здесь: http://jsfiddle.net/itsmappleby/f4mak/

Ответ 3

В случае, если кому-то это интересно - это сработало для меня - свойство CSS-text-decoration-color CSS:

.example { 
    text-decoration: underline;
    text-decoration-color: red;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color

Ответ 4

Или вы можете использовать границу. Этот метод работает на ie6.

HTML

<a href="#" class='underline'>
  <span>this just</span><br/>
  <span>a test</span><br/>
  <span>of underline color</span>
</a>

CSS

  a.underline {
    text-decoration: none;
  }
  a.underline span {
    display: inline-block;
    border-bottom: 1px solid red;
    font-size: 15px;
    line-height: 12px;
  }

и пример: http://jsfiddle.net/skanY/1/embedded/result/

Ответ 5

Подчеркнутый, являющийся текстовым атрибутом, наследует цвет текста. Поэтому я сомневаюсь, что есть способ явно изменить цвет подчеркивания без изменения цвета текста.

Ответ 6

Подчеркивание ссылок всегда будет того же цвета, что и текст.

Ответ 7

Извините за то, что вы ответили на старый вопрос, но у меня была такая же проблема, и я не нашел удовлетворительного ответа, поэтому я придумал другое решение и подумал, что поделюсь с вами.

он включает фоновое изображение 1x1 (или любой другой размер, который вы предпочитаете), но он чистый и простой - и 100% совместимый с браузером (проверен от IE6 и выше).

В этом примере есть текст, который меняет цвет, а подчеркивание остается неизменным. вы можете так же легко сделать это по-другому.

a, a:link, a:active, a:visited{
    text-decoration:none;
    color:#888;
    background:transparent url('underline.png');
    background-position:0 10px;
    background-repeat:repeat-x;
}

a:hover{
    color:#009ee0;
}

Ответ 8

Я знаю, что это старый вопрос, но я думал, что добавлю это...

a:active, a:link, a:visited{
    background-image: linear-gradient(rgba(255,255,255,0)50%, #ff5400 50%);
    text-decoration: none;
    background-size: 2px 2px;
    background-position: 0 1.2em;
    background-repeat: repeat-x;
}

Примечание. Поддержка старых браузеров не поддерживается полностью.

Ответ 9

подчеркивание ссылок выполняется с использованием стиля text-decoration css, я думаю, что тот же цвет, что и текст.

если вы установите для текста-украшения значение none, затем добавьте нижний край, вы можете изменить цвет с помощью стиля рамки.

Ответ 10

Также вы можете использовать этот код для создания подчеркивания с другим цветом. Используйте границы

h1{
     border-bottom: 1px solid #AAAAAA
}

изменить: вы можете использовать java script для рисования строки под текстом