Edit line thickness of CSS underline attribute

Question

Since you can underline any text in CSS like so  h4       text-decoration  underline     How can you also then edit the  line  that is drawn  the color you get on the line is easily specified as color  red but how does one edit the height of the line  i e  the thickness

User · Answer

I will do something simple like     thickness-underline       display  inline-block      text-decoration  none      border-bottom  1px solid black      margin-bottom  -1px       You can use line-height or padding-bottom to set possition between them You can use display  inline in some case   Demo   http   jsfiddle net 5580pqe8

User · Answer

You can do it with a linear-gradient by setting it to be like this   x000D   x000D  h1  a       display  inline      text-decoration  none      color  black      background-image  linear-gradient to top   000 12   transparent 12      x000D   lt h1 gt I m underlined lt  h1 gt   lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim  lt a href  https   stackoverflow com  gt veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in lt  a gt  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  p gt  x000D   x000D   x000D   And  yes  you can change it like this     x000D   x000D  var m   document getElementById  m    m onchange   u  function u         document getElementById  a   innerHTML     root   --value      m value           x000D  h1  a       display  inline      text-decoration  none      color  black      background-image  linear-gradient to top   000 var --value   transparent var --value      x000D   lt h1 gt I m underlined lt  h1 gt   lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim  lt a href  https   stackoverflow com  gt veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in lt  a gt  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  p gt   lt style id  a  gt  lt  style gt   lt input type  range  min  0  max  100  id  m    gt  x000D   x000D   x000D

User · Answer

Here is one way of achieving this     HTML      lt h4 gt This is a heading lt  h4 gt    lt h4 gt  lt u gt This is another heading lt  u gt  lt  h4 gt     CSS      u       text-decoration  none      border-bottom  10px solid black         Here is an example  http   jsfiddle net AQ9rL

User · Answer

x000D   x000D  a   x000D    text-decoration  none  x000D    position  relative  x000D    x000D   x000D  a underline   x000D    text-decoration  underline  x000D    x000D   x000D  a shadow   x000D     box-shadow  inset 0 -4px 0 white  inset 0 -4 5px 0 blue  x000D    x000D   lt h1 gt  lt a href     class  underline  gt Default  some text alpha gamma lt br gt the quick brown fox lt  a gt  lt  h1 gt  x000D   lt p gt Working  lt  p gt  x000D   lt h1 gt  lt a href     class  shadow  gt Using Shadow  some text alpha gamma lt br gt the quick brown fox lt br gt even works with lt br gt multiple lines lt  a gt  lt  h1 gt  x000D   lt br gt  x000D   x000D   x000D    Final Solution   http   codepen io vikrant-icd pen gwNqoM  a shadow      box-shadow  inset 0 -4px 0 white  inset 0 -4 5px 0 blue

User · Answer

Thanks to the magic of new css options this is now possible natively   a     text-decoration  underline    text-decoration-thickness  5px    text-decoration-skip-ink  auto    text-underline-offset  3px      As of yet support is relatively poor  But it ll land in other browsers than ff eventually

User · Answer

My Solution   https   codepen io SOLESHOE pen QqJXYj        display  inline-block      border-bottom  1px solid      padding-bottom  0      line-height  70       You can adjust underline position with line-height value  underline thickness and style with border-bottom   Beware to disable default underline behavior if you want to underline an href

User · Answer

Very easy     outside  span  element with small font and underline  and inside  font  element with bigger font size     x000D   x000D   lt span style  font-size 1em text-decoration underline   gt  x000D    lt span style  font-size 1 5em   gt  x000D     Text with big font size and thin underline x000D    lt  span gt  x000D   lt  span gt  x000D   x000D   x000D

User · Answer

Another way to do this is using   after   pseudo-element  on the element you want to underline   h2    position relative    display inline-block    font-weight 700    font-family arial sans-serif    text-transform uppercase    font-size 3em    h2 after    content       position absolute    left 0    bottom 0    right 0    margin auto    background  000    height 1px

User · Answer

Recently I had to deal with FF which underlines were too thick and too far from the text in FF  and found a better way to deal with it using a pair of box-shadows    custom-underline      box-shadow  inset 0 0px 0 white  inset 0 -1px 0 black     First shadow is put on top of the second one and that s how you can control the second one by varying the  px  value of both    Plus  various colors  thickness and underline position  Minus  can not use on non-solid backgrounds   Here I made couple of examples  http   jsfiddle net xsL6rktx

User · Answer

The background-image can also be used to create an underline  This method handles line breaks  It has to be shifted down via background-position and repeated horizontally  The line width can be adjusted to some degree using background-size  the background is limited to the content box of the element    x000D   x000D   underline       --color  green      font-size  40px      background-image  linear-gradient var --color  0   var --color  100        background-repeat  repeat-x      background-position  0 1 05em      background-size  2px 5px    x000D   lt span class  underline  gt       Underlined lt br  gt       Text  lt  span gt  x000D   x000D   x000D

User · Answer

There is text-decoration-thickness  currently part of CSS Text Decoration Module Level 4  It s at  Editor s Draft  stage - so it s a work in progress and subject to change  As of January 2020  it is only supported in Firefox and Safari      The text-decoration-thickness CSS property sets the thickness  or   width  of the decoration line that is used on text in an element  such   as a line-through  underline  or overline    a     text-decoration-thickness  2px      Codepen  https   codepen io mrotaru pen yLyLOgr  Firefox only     There s also text-decoration-color  which is part of CSS Text Decoration Module Level 3  This is more mature  Candidate Recommendation  and is supported in most major browsers  exceptions are Edge and IE   Of course it can t be used to alter the thickness of the line  but can be used to achieve a more  muted  underline  also shown in the codepen

[html] Edit line thickness of CSS 'underline' attribute

Examples related to html

Examples related to css