Changing Underline color

Question

I have this code here   echo   lt u gt  lt font color  red  gt  lt br gt  username lt  font gt  lt  u gt      Firstly  as you can see  it s underlined   lt  u     Second  all text is all red  Well is there anyway to leave the text   username  red but the underline black

User · Answer

Best way I came across doing is like this:

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

User · Answer

No  The best you can do is to use a border-bottom with a different color  but that isn t really underlining

User · Answer

here we can create underline with color in text    x000D   x000D   lt u style  text-decoration-color  red   gt The color of the lines should now be red  lt  u gt  x000D   x000D   x000D    or  The color of the lines should now be red    x000D   x000D   lt h1 style   text-decoration underline  text-decoration-color  red   gt The color of the lines should now be red  lt  u gt  x000D   x000D   x000D

User · Answer

Another way that the one described by danield is to have a child container width display inline  and the tipography color you want   The parent element width the text-decoration  and the color of underline you want  Like this    x000D   x000D  div text-decoration underline color  ff0000 display inline-block width 50px  x000D  div span color  000 display inline  x000D   lt div gt  x000D     lt span gt Hover me  i can have many lines lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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 don t need any extra elements  you can position it as close or far as you want from the text  border-bottom is kinda far for my liking   there aren t any extra colors that show up if your link is over a different colored background  like with the box-shadow trick   and it works in all browsers  text-decoration-color only supports Firefox as of yet    Possible downside  The link can t be position static  but that s probably not a problem the vast majority of the time  Just set it to relative and all is good

User · Answer

Update from author  This answer is outdated since text-decoration-color is now supported by most modern browsers        pseudo   em  In order to accurately replicate the size  stroke width  and positioning of the native text-decoration underline without introducing extra HTML markup  you should use a pseudo-element with em units  This allows for accurate scaling of the element and native 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       By using display table-caption and caption-side on the pseudo-element and display inline-table  we can force the browser to vertically-align both line and link accurately  even when scaled   In this instance  we use inline-table instead of inline-block to force the pseudo to display without the need to specify height or negative values    Examples  JSFIDDLE  https   jsfiddle net pohuski 8yfpjuod 8  CODEPEN  http   codepen io pohuski pen vEzxPj    example with scaling   Successfully Tested On  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

User · Answer

Problem with border-bottom is the extra distance between the text and the line  Problem with text-decoration-color is lack of browser support  Therefore my solution is the use of a background-image with a line  This supports any markup  color s  and style of the line  top  12px in my example  is dependent on line-height of your text    u       text-decoration  none      background  transparent url blackline png  repeat-x 0px 12px

User · Answer

There s now a new css3 property for this  text-decoration-color  So you can now have text in one color and a text-decoration underline - in a different color    without needing an extra  wrap  element   x000D   x000D  p   x000D    text-decoration  underline  x000D    -webkit-text-decoration-color  red     safari still uses vendor prefix    x000D    text-decoration-color  red  x000D    x000D   lt p gt black text with red underline in one element - no wrapper elements here  lt  p gt  x000D   x000D   x000D    Codepen  NB    1  Browser Support is limited at the moment to Firefox and Chrome  fully supported as of V57  and Safari  2  You could also use the text-decoration shorthand property which looks like this    lt text-decoration-line gt      lt text-decoration-style gt      lt text-decoration-color gt       so using the text-decoration shorthand - the example above would simply be   p     text-decoration  underline red       x000D   x000D  p   x000D    text-decoration  underline red  x000D    x000D   lt p gt black text with red underline in one element - no wrapper elements here  lt  p gt  x000D   x000D   x000D

User · Answer

You can also use the box-shadow property to simulate an underline   Here is a fiddle  The idea is to use two layered box shadows to position the line in the same place as an 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

User · Answer

In practice  it is possible  if you use span element instead of font    lt style gt  u   color  black     red   color  red    lt  style gt   lt u gt  lt span class  red  gt  lt br gt  username lt  span gt  lt  u gt    See jsfiddle  Appears to work on Chrome  Safari  Firefox  IE  Opera  tested on Win 7 with newest versions     The code in the question should work  too  but it does not work for some reason on WebKit browsers  Chrome  Safari    By the CSS spec     The color s  required for the text decoration must be derived from the  color  property value of the element on which  text-decoration  is set  The color of decorations must remain the same even if descendant elements have different  color  values

User · Answer

You can wrap your  lt span gt  with a  lt a gt  and use this little JQuery plugin to color the underline  You can modify 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   lt a gt  lt  a gt                 var element   this closest  a                element css aCSS               return element                    jQuery     Then you call by writing this           span name   useful  color  red        x000D   x000D    function      x000D   x000D          var spanCSS     x000D               color      000   x000D               text-decoration    none  x000D             x000D           x000D            fn useful   function  params    x000D               x000D              var aCSS     x000D                   color      d43   x000D                   text-decoration     underline  x000D                 x000D   x000D                extend aCSS  params   x000D              this wrap   lt a gt  lt  a gt     x000D              this closest  a   css aCSS   x000D             x000D   x000D             Use example  x000D             span name   css spanCSS  useful  color  red     x000D   x000D   x000D   x000D          x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt section class  container  gt  x000D   x000D       lt div class  user important  gt  x000D           lt span class  name  gt Bob lt  span gt  x000D          - x000D           lt span class  location  gt Bali lt  span gt  x000D       lt  div gt  x000D   x000D       lt div class  user  gt  x000D           lt span class  name  gt Dude lt  span gt  x000D          - x000D           lt span class  location  gt Los Angeles lt  span gt  x000D       lt  div gt  x000D   x000D   x000D       lt div class  user  gt  x000D           lt span class  name  gt G  rard lt  span gt  x000D          - x000D           lt span class  location  gt Paris lt  span gt  x000D       lt  div gt  x000D   x000D   lt  section gt  x000D   x000D   x000D

User · Answer

The easiest way I ve tackled this is with CSS    lt style gt   redUnderline       color   ff0000      border-bottom  1px solid  000000     lt  style gt   lt span class  redUnderline  gt  username lt  span gt    Also  for an actual underline  if your item is a link  this works    lt style gt  a blackUnderline      color   000000     text-decoration  underline     red       color   ff0000     lt  style gt   lt a href    class  blackUnderline  gt  lt span class  red  gt  username lt  span gt  lt  a gt

User · Answer

You can use this CSS to  simulate  an underline   text-decoration  none  border-bottom  1px solid  000

User · Answer

I think the easiest way to do this is in your css  use   text-decoration-color  red    This will change the color of the underline without changing the color of your text  Good luck

[html] Changing Underline color

Examples related to html

Examples related to css

Examples related to underline