How to increase the gap between text and underlining in CSS

Question

Using CSS  when text has text-decoration underline applied   is it possible to increase the distance between the text and the underline

User · Answer

You can use this text-underline-position  under  See here for more detail  https   css-tricks com almanac properties t text-underline-position   See also browser compatibility

User · Answer

just use      text-decoration-line  underline     text-underline-offset  2px

User · Answer

Getting into the details of the visual style of text-decoration underline is pretty much futile  so you re going to have to go with some kind of hack the removes text-decoration underline and replaces it with something else until a magical far-distant future version of CSS gives us more control     This worked for me    x000D   x000D     a   x000D      background-image  linear-gradient  x000D          180deg  rgba 0 0 0 0   x000D          rgba 0 0 0 0  81    x000D           222222 81 1   x000D           222222 85   x000D          rgba 0 0 0 0  85 1   x000D          rgba 0 0 0 0  x000D         x000D      text-decoration  none  x000D    x000D   lt a href     gt Lorem ipsum lt  a gt  dolor sit amet   lt a href     gt consetetur sadipscing lt  a gt  elitr  sed diam nonumy eirmod tempor  lt a href     gt invidunt ut labore  lt  a gt  x000D   x000D   x000D     Adjust the   values  81  and 85   to change how far the line is from the text Adjust the difference between the two   values to change the line thickness adjust the color values   222222  to change the underline color works with multiple line inline elements works with any background   Here s a version with all the proprietary properties for some backwards compatibility   a               This code generated from  http   colorzilla com gradient-editor         background  -moz-linear-gradient top   rgba 0 0 0 0  0   rgba 0 0 0 0  81   rgba 0 0 0 1  81 1   rgba 0 0 0 1  85   rgba 0 0 0 0  85 1   rgba 0 0 0 0  100       FF3 6         background  -webkit-gradient linear  left top  left bottom  color-stop 0  rgba 0 0 0 0    color-stop 81  rgba 0 0 0 0    color-stop 81 1  rgba 0 0 0 1    color-stop 85  rgba 0 0 0 1    color-stop 85 1  rgba 0 0 0 0    color-stop 100  rgba 0 0 0 0        Chrome Safari4         background  -webkit-linear-gradient top   rgba 0 0 0 0  0  rgba 0 0 0 0  81  rgba 0 0 0 1  81 1  rgba 0 0 0 1  85  rgba 0 0 0 0  85 1  rgba 0 0 0 0  100       Chrome10  Safari5 1         background  -o-linear-gradient top   rgba 0 0 0 0  0  rgba 0 0 0 0  81  rgba 0 0 0 1  81 1  rgba 0 0 0 1  85  rgba 0 0 0 0  85 1  rgba 0 0 0 0  100       Opera 11 10         background  -ms-linear-gradient top   rgba 0 0 0 0  0  rgba 0 0 0 0  81  rgba 0 0 0 1  81 1  rgba 0 0 0 1  85  rgba 0 0 0 0  85 1  rgba 0 0 0 0  100       IE10         background  linear-gradient to bottom   rgba 0 0 0 0  0  rgba 0 0 0 0  81  rgba 0 0 0 1  81 1  rgba 0 0 0 1  85  rgba 0 0 0 0  85 1  rgba 0 0 0 0  100       W3C         text-decoration  none      Update  SASSY version  I made a scss mixin for this  If you don t use SASS  the regular version above still works great      mixin fake-underline  color   666   top  84    bottom  90         background-image  linear-gradient          180deg  rgba 0 0 0 0           rgba 0 0 0 0   top           color  top   0 1            color  bottom          rgba 0 0 0 0   bottom   0 1           rgba 0 0 0 0             text-decoration  none      then use it like so    blue    0054a6  a       color   blue       include fake-underline lighten  blue 20       a thick       color   blue       include fake-underline lighten  blue 40    86   99        Update 2  Descenders Tip  If you have a solid background color  try adding a thin text-stroke or text-shadow in the same color as your background to make the descenders look nice   Credit  This is simplified version of the technique I originally found at https   eager io app smartunderline  but the article has since been taken down

User · Answer

If you want    multiline dotted with custom bottom padding without wrappers   underline  you can use 1 pixel height background image with repeat-x and 100  100  position   display  inline  background  url  data image png base64 iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In KAAAAEUlEQVQIW2M0Lvz  2w IyMAFJoEAis2CPEAAAAASUVORK5CYII    repeat-x 100  100     You can replace the second 100  by something else like px or em to adjust the vertical position of the underline  Also you can use calc if you want to add vertical padding  e g    padding-bottom  5px  background-position-y  calc 100  - 5px     Of course you can also make your own base64 png pattern with another color  height and design  e g  here  http   www patternify com  - just set square width  amp  height at 2x1   Source of inspiration  http   alistapart com article customunderlines

User · Answer

This is what i use   html    lt h6 gt  lt span class  horizontal-line  gt GET IN lt  span gt  TOUCH lt  h6 gt    css    horizontal-line   border-bottom  2px solid   FF0000  padding-bottom  5px

User · Answer

I was able to Do it using the U  Underline Tag   u       text-decoration  none      position  relative    u after       content          width  100       position  absolute      left  0      bottom  1px      border-width  0 0 1px      border-style  solid       lt a href    style  text-decoration none  gt       lt div style  text-align  right  color  Red   gt           lt u gt  Shop Now lt  u gt       lt  div gt   lt  a gt

User · Answer

I know it s an old question  but for single line text setting display  inline-block and then setting the height has worked well for me to control the distance between a border and the text

User · Answer

If you are using text-decoration  underline   then you can add space between underline and text by using text-underline-position  under   For more The text-underline-position properties  you can have look here

User · Answer

last-child s answer is a great answer    However  adding a border to my H2 produced an underline longer than the text   If you re dynamically writing your CSS  or if like me you re lucky and know what the text will be  you can do the following    change the content to something the right length  ie the same text  set the font color to transparent  or rgba 0 0 0 0      to underline  lt h2 gt Processing lt  h2 gt   for example   change last-child s code to be    a       text-decoration  none      position  relative    a after       content   Processing       color  transparent       width  100       position  absolute      left  0      bottom  1px       border-width  0 0 1px      border-style  solid

User · Answer

See my fiddle   You would need to use the border width property and the padding property  I added some animation to make it look cooler    x000D   x000D  body  x000D    background-color lightgreen  x000D    x000D  a  x000D    text-decoration none  x000D    color green  x000D    border-style solid  x000D    border-width  0px 0px 1px 0px  x000D    transition  all  2s ease-in  x000D    x000D   x000D  a hover  x000D    color darkblue  x000D    border-style solid  x000D    border-width  0px 0px 1px 0px  x000D    padding 2px  x000D    x000D   lt a href      gt Somewhere     over the rainbow  lalala  lt  a gt    blue birds  fly     tweet tweet    and I wonder  hmm  about what a  lt i gt  lt a href     gt what a wonder-ful world  lt  a gt  World  lt  i gt  x000D   x000D   x000D

User · Answer

Update 2019  The CSS Working Group has published a draft for text decoration level 4 which would add a new property text-underline-offset  as well as text-decoration-thickness  to allow control over the exact placement of an underline  As of this writing  it s an early-stage draft and has not been implemented by any browser  but it looks like it will eventually make the technique below obsolete   Original answer below     The problem with using border-bottom directly is that even with padding-bottom  0  the underline tends to be too far away from the text to look good  So we still don t have complete control   One solution that gives you pixel accuracy is to use the  after pseudo element   a       text-decoration  none      position  relative    a after       content           width  100       position  absolute      left  0      bottom  1px       border-width  0 0 1px      border-style  solid      By changing the bottom property  negative numbers are fine  you can position the underline exactly where you want it   One problem with this technique to beware is that it behaves a bit weird with line wraps

User · Answer

An alternative for multiline texts or links  you can wrap your texts in a span inside a block element     lt a href     gt       lt span gt insert multiline texts here lt  span gt   lt  a gt     then you can just add border-bottom and padding on the  lt span gt    a     width  300px    display  block     span     padding-bottom  10px    border-bottom  1px solid  0099d3    line-height  48px      You may refer to this fiddle  https   jsfiddle net Aishaterr vrpb2ey7 2

User · Answer

What I use    lt span style  border-bottom  1px solid black  gt  Enter text here  lt  span gt

User · Answer

No  but you could go with something like border-bottom  1px solid  000 and padding-bottom  3px   If you want the same color of the  underline   which in my example is a border   you just leave out the color declaration  i e  border-bottom-width  1px and border-bottom-style  solid   For multiline  you can wrap you multiline texts in a span inside the element  E g   lt a href     gt  lt span gt insert multiline texts here lt  span gt  lt  a gt  then just add border-bottom and padding on the  lt span gt  - Demo

User · Answer

Here is what works well for me     x000D   x000D   lt style type  text css  gt  x000D     underline-gap   x000D      text-decoration  underline  x000D      text-underline-position  under  x000D      x000D   lt  style gt  x000D   lt body gt  x000D     lt h1 id  underline-gap  gt  lt a href  https   Google com  gt Google lt  a gt  lt  h1 gt  x000D   lt  body gt  x000D   x000D   x000D

[css] How to increase the gap between text and underlining in CSS

Examples related to css

Examples related to underline