Change underline color

Question

I have this code here:

echo "<u><font color='red'><br>$username</font></u>"; 

First, as you can see, he emphasized (<u>). Secondly, the entire text is red. Well, anyway, to leave the text ($ username) red, but the underline black?

Answer 1

No. The best you can do is use border-bottom with a different color, but that doesn't really emphasize.

Answer 2

Now there is a new css3 property for this: text-decoration-color

So now you can have text in one color and underline text-decoration in another color ... without the extra 'wrap' element

 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

NB:

1) Browser support is currently limited to Firefox and Chrome (fully supported with V57) and Safari

2) You can also use text-decoration shorthand property, which looks like this:

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

... therefore, using the text-decoration abbreviation, the above example would be simple:

 p { text-decoration: underline red; } 

 p { text-decoration: underline red; } 

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

Answer 3

: pseudo + em

To accurately replicate the size, stroke width, and position of the native text-decoration:underline without introducing additional HTML markup , you should use pseudo-element with em . This allows you to accurately scale the element and its own behavior without additional markup.

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; } 

Using the display: table-caption and caption-side on the pseudo-element and display the inline-table , we can make the browser vertically align both the line and the link exactly, even when scaling.

In this case, we use the inline table instead of the inline-block to make the pseudo-map appear without the need for height or negative values.

Examples

JSFIDDLE : https://jsfiddle.net/pohuski/8yfpjuod/8/
CODEPEN : http://codepen.io/pohuski/pen/vEzxPj | (example with scaling)

Successfully tested:
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 browser: 4.4, 2.3
Dolphin Mobile: 8, 11.4

Answer 4

In practice, this is possible if you use span instead of font :

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

See jsfiddle . Appears to work in Chrome, Safari, Firefox, IE, Opera (tested on Win 7 with the latest versions).

The code in the question should also work, but for some reason it does not work in WebKit browsers (Chrome, Safari).

In the CSS specification : “The color (s) required to style the text should be obtained from the value of the“ color ”property of the element on which“ text-decoration ”is set. The color of the decorations should remain unchanged even if descendant elements have different color values .

Answer 5

The easiest way I've come across is CSS:

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

Also, for the actual underline, if your element is a link, this works:

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

Answer 6

You can also use the box-shadow property to simulate underlining.

Here is the fiddle . The idea is to use two-layer strain gauges to place the string in the same place as the underline.

 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); } 

Answer 7

A pseudo-element works best.

 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; } 

See jsfiddle .

You do not need any additional elements, you can place it as close or far away as possible from the text (I really like the bottom frame), there are no additional colors that appear if your link to another colored background (for example, with the box-shadow shadow tag ), and it works in all browsers (text-decoration-color only supports Firefox so far).

Possible flaw: the link may not be positional: static, but this is probably not a problem in the vast majority of cases. Just set it relatively, and all is well.

Answer 8

Another way danield is described is to have the display width of the child container in a row and the desired hue. The parent element of the text-decoration width and the underline color you want. Like this:

 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> 

Answer 9

You can use this CSS to "simulate" underscores:

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

Answer 10

You can wrap <span> with <a> and use this little jQuery plugin to color the underline. You can change the color by passing a parameter to the plugin.

  (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); 

Then you call, writing this:

  $("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> 

Answer 11

here we can create an underline with color in the text

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

or

The color of the lines should now be red!

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

Answer 12

I think the easiest way to do this in your css is to use:

 text-decoration-color: red; 

This will change the color of the underline without changing the color of your text. Good luck

Answer 13

The problem with border-bottom is the extra distance between text and line. The problem with text-decoration-color is the lack of browser support. So my solution is to use a background image with a line. It supports any layout, color and line style. top (12px in my example) depends on the line-height your text.

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