У меня есть этот код здесь:
echo "<u><font color='red'><br>$username</font></u>";
Во-первых, как вы можете видеть, он подчеркивал (<u> ). Во-вторых, весь текст красный. Ну, так или иначе, чтобы оставить текст ($ username) красным, но подчеркивание черным?
Нет. Лучшее, что вы можете сделать, это использовать border-bottom с другим цветом, но это не особо подчеркивает.
Теперь для этого есть новое свойство css3: text-decoration-color
Итак, теперь вы можете иметь текст в одном цвете и подчеркивание text-decoration - в другом цвете... без лишнего элемента 'wrap'
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>Для точной тиражирования размера, ширины штриха и позиционирования нативного text-decoration:underline без введения дополнительной разметки HTML, вы следует использовать pseudo-element с em. Это позволяет точно масштабировать элемент и собственное поведение без дополнительной разметки.
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-таблицу вместо 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
Сафари: 8, 7, 6.2
Mobile Safari: 9.0, 8.0
Android-браузер: 4.4, 2.3
Dolphin Mobile: 8, 11.4
На практике это возможно, если вы используете 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: "Цвет (ы), требуемый для оформления текста, должен быть получен из значения свойства" цвет "элемент, на котором установлен" text-decoration". Цвет украшений должен оставаться неизменным, даже если элементы-потомки имеют разные значения цвета.
Самый простой способ, с которым я столкнулся, - это 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>
Вы также можете использовать свойство box-shadow для имитации подчеркивания.
Вот fiddle. Идея состоит в том, чтобы использовать двухслойные тензодатчики для размещения строки в том же месте, что и подчеркивание.
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);
}
Псевдоэлемент работает лучше всего.
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.
Вам не нужны никакие дополнительные элементы, вы можете поместить его как можно ближе или далеко от текста (рамка снизу мне очень нравится), нет никаких дополнительных цветов, которые появляются, если ваш ссылка на другой цветной фон (например, с теневым тэгом box-shadow), и он работает во всех браузерах (text-decoration-color только поддерживает Firefox до сих пор).
Возможный недостаток: ссылка не может быть позиционной: статическая, но это, вероятно, не проблема в подавляющем большинстве случаев. Просто установите его относительно, и все хорошо.
Другой способ, которым описывается danield, состоит в том, чтобы иметь ширину отображения дочернего контейнера в строке и нужный оттенок. Родительский элемент ширины text-decoration и цвет подчеркивания, который вы хотите. Вот так:
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>Вы можете использовать этот CSS для "имитации" подчеркивания:
text-decoration: none;
border-bottom: 1px solid #000;
Вы можете обернуть <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>здесь мы можем создать подчеркивание с цветом в тексте
<u style="text-decoration-color: red;">The color of the lines should now be red!</u>Я думаю, что самый простой способ сделать это в вашем 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;
}