Изменение цвета подчеркивания

Лучший способ, с которым я столкнулся, это:

HTML5:

<p>Initial Colors <a id="new-color">Different Colors</a></p>

CSS3:

p {
    color: #000000;
    text-decoration-line: underline;
    text-decoration-color: #a11015;
}

p #new-color{
    color: #a11015;
    text-decoration-line: underline;
    text-decoration-color: #000000;
}

Я думаю, что самый простой способ сделать это в вашем CSS, используйте:

text-decoration-color: red;

Это изменит цвет подчеркивания без изменения цвета вашего текста. Удачи!

Проблема с border-bottom заключается в дополнительном расстоянии между текстом и строкой. Проблема с text-decoration-color заключается в отсутствии поддержки браузера. Поэтому мое решение - использовать фоновое изображение с линией. Это поддерживает любую разметку, цвет (ы) и стиль линии. top (12px в моем примере) зависит от line-height вашего текста.

 u {
    text-decoration: none;
    background: transparent url(blackline.png) repeat-x 0px 12px;
}

Псевдоэлемент работает лучше всего.

a, a:hover {
  position: relative;
  text-decoration: none;
}
a:after {
  content: '';
  display: block;
  position: absolute;
  height: 0;
  top:90%;
  left: 0;
  right: 0;
  border-bottom: solid 1px red;
}

См. jsfiddle .

Вам не нужны никакие дополнительные элементы, вы можете расположить их как можно ближе или ближе к тексту (граница мне нравится на мой взгляд), нет никаких дополнительных цветов, которые отображаются, если ваш ссылка находится на другом цветном фоне (как в случае с рамкой тени), и она работает во всех браузерах (текст-художественное оформление-цвет пока поддерживает только Firefox).

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

здесь мы можем создать подчеркивание цветом в тексте

<u style="text-decoration-color: red;">The color of the lines should now be red!</u>

или

Цвет теперь линии должны быть красными!

<h1 style=" text-decoration:underline; text-decoration-color: red;">The color of the lines should now be red!</u>

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

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

a.underline {
    text-decoration: none;
    box-shadow: inset 0 -4px 0 0 rgba(255, 255, 255, 1), inset 0 -5px 0 0 rgba(255, 0, 0, 1);
}

Вы можете заключить <span> в <a> и использовать этот маленький плагин JQuery, чтобы закрасить подчеркивание. Вы можете изменить цвет, передав параметр плагину.

    (function ($) {
        $.fn.useful = function (params) {

            var aCSS = {
                'color' : '#d43',
                'text-decoration' : 'underline'
            };

            $.extend(aCSS, params);

            this.wrap('<a></a>');
            var element = this.closest('a');
            element.css(aCSS);
            return element;
        };
    })(jQuery);

Затем вы звоните, написав это:

    $("span.name").useful({color:'red'});

$(function () {

        var spanCSS = {
            'color' : '#000',
            'text-decoration': 'none'
        };
        
        $.fn.useful = function (params) {
            
            var aCSS = {
                'color' : '#d43',
                'text-decoration' : 'underline'
            };

            $.extend(aCSS, params);
            this.wrap('<a></a>');
            this.closest('a').css(aCSS);
        };

        // Use example:
        $("span.name").css(spanCSS).useful({color:'red'});



    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="container">

    <div class="user important">
        <span class="name">Bob</span>
        -
        <span class="location">Bali</span>
    </div>

    <div class="user">
        <span class="name">Dude</span>
        -
        <span class="location">Los Angeles</span>
    </div>


    <div class="user">
        <span class="name">Gérard</span>
        -
        <span class="location">Paris</span>
    </div>

</section>

Вы можете использовать этот CSS для «имитации» подчеркивания:

text-decoration: none;
border-bottom: 1px solid #000;

Самый простой способ, которым я справился, это с помощью CSS:

<style>
.redUnderline {
    color: #ff0000;
    border-bottom: 1px solid #000000;
}
</style>
<span class="redUnderline">$username</span>

Кроме того, для фактического подчеркивания, если ваш элемент является ссылкой, это работает:

<style>
a.blackUnderline {
   color: #000000;
   text-decoration: underline;
}
.red {
    color: #ff0000;
}
</style>
<a href="" class="blackUnderline"><span class="red">$username</span></a>

Обновление от автора:
Этот ответ устарел, поскольку text-decor-color теперь поддерживается большинством современных браузеров.

: псевдо + em

Для точного копирования размера, ширины обводки и расположения нативного text-decoration:underline без введения дополнительной разметки HTML , вы должны использовать pseudo-element с em единицами. Это учитывает точное масштабирование элемента и нативное поведение без дополнительной разметки.

CSS

`a {
  text-decoration: none;
  display: inline-table;
}

a:after {
  content: "";
  border-bottom: 0.1em solid #f00;
  display: table-caption;
  caption-side: bottom;
  position: relative;
  margin-top:-0.15em;
}`

С помощью дисплея: table-caption и caption-side на псевдоэлементе и отображении inline-table , мы можем заставить браузер точно выровнять и линию, и ссылку точно по вертикали, даже при масштабировании.

В этом случае мы используем inline-table вместо inline-block, чтобы заставить псевдо-отображение отображаться без необходимости указывать высоту или отрицательные значения.

Примеры

JSFIDDLE : https://jsfiddle.net/pohuski/8yfpjuod/8/
CODEPEN : http://codepen.io/pohuski/pen/vEzxPj | (пример с масштабированием)

Успешно протестировано:
Internet Explorer: 8, 9, 10, 11
Firefox: 41, 40, 39, 38, 37, 36
Chrome: 45, 44, 43, 42
Safari: 8, 7, 6,2
Mobile Safari: 9,0, 8,0
Браузер Android: 4.4, 2.3
Dolphin Mobile: 8, 11.4

Еще один способ, который описан в danield, заключается в отображении ширины дочернего контейнера и желаемого цвета типографии. Родительский элемент имеет ширину текстового оформления и требуемый цвет подчеркивания. Вот так:

div{text-decoration:underline;color:#ff0000;display:inline-block;width:50px}
div span{color:#000;display:inline}

<div>
  <span>Hover me, i can have many lines</span>
</div>

На практике это возможно, если вы используете элемент span вместо font:

<style>
u { color: black; }
.red { color: red }
</style>
<u><span class='red'><br>$username</span></u>

См. jsfiddle . Похоже, работает на Chrome, Safari, Firefox, IE, Opera (протестировано на Win 7 с новейшими версиями).

Код в вопросе тоже должен работать, но по некоторым причинам он не работает в браузерах WebKit (Chrome, Safari).

Согласно спецификации CSS : «Цвет (ы), требуемый для оформления текста, должен быть получен из значения свойства« color »элемента, для которого установлено« text-painting ». Цвет художественных оформлений должен оставаться неизменным, даже если у дочерних элементов разные значения «цвета» ».

Для этого теперь есть новое свойство css3: text-decor-color

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

p {
  text-decoration: underline;
  -webkit-text-decoration-color: red; /* safari still uses vendor prefix */
  text-decoration-color: red;
}

<p>black text with red underline in one element - no wrapper elements here!</p>

Codepen

Примечание:

1) Поддержка браузеров на данный момент ограничена Firefox и Chrome (полностью поддерживается с V57) и Safari

] 2) Вы также можете использовать сокращенное свойство text-украшение , которое выглядит следующим образом:

<text-decoration-line> || <text-decoration-style> || <text-decoration-color>

... так что используйте сокращение text-decoration - приведенный выше пример будет просто :

p {
  text-decoration: underline red;
}

p {
  text-decoration: underline red;
}

<p>black text with red underline in one element - no wrapper elements here!</p>