Spacing between text and underline

Question

I am looking for a way to enlarge the distance between the text and underline on my pages. i use mainly CSS but i had to use tags as well, basicly my question considers both cases. is there a way to change this spacing? the code is pretty simple:

.title_span {
  font-weight: bold;
  text-decoration: underline;
  color: grey;
}

my other posibility is try somehow use background for the span using 1px picture and repeat against X axis i am looking for cleaner solution.

http://stackoverflow.com/questions/1734618/css-underline-possible-to-increase-gap — Dhaval Marthak, Nov 18 '13 at 12:49
possible duplicate of [space between text and underline](http://stackoverflow.com/questions/3085394/space-between-text-and-underline) — Tigran Petrossian, Nov 18 '13 at 12:49

score 10 · Accepted Answer · edited Jul 12 '23 at 02:05

10

Not without tricks, no. One simple solution is to wrap the text in another span and give that a bottom border.

.title_span {
  font-weight: bold;
  text-decoration: underline;
  color: grey;
}

.underline {
  padding-bottom: 2px;
  border-bottom: grey 1px solid;
}

<span class="underline">
  <span class="title_span">title of something</span>
</span>

edited Jul 12 '23 at 02:05

Penny Liu

15,447
5
79
98

answered Nov 18 '13 at 12:51

Aaron Digulla

321,842
108
597
820

1

There is no need for the extra wrapper, you can transfer the border properties directly inside the .title_span : http://jsfiddle.net/m9RQ9/2/ – kevinius Nov 18 '13 at 12:56
when i apply padding-left to the title_span the underline remains at initial position. it should move along the text. @Aaron Digulla – Tayyab Hussain Aug 17 '15 at 10:32
@Tayyab_Hussain: Padding is inside the box. Try margin. – Aaron Digulla Aug 17 '15 at 13:19

score 0 · Answer 2 · edited Nov 28 '18 at 22:02

0

I'm afraid this isn't possible per se, but what you can do is apply a border-bottom as an alternative to background-image

edited Nov 28 '18 at 22:02

kaqqao

12,984
10
64
118

answered Nov 18 '13 at 12:49

SW4

69,876
20
132
137

score 0 · Answer 3 · edited Jul 12 '23 at 02:06

0

spacing between text and underline its No, but you could go with something like border-bottom: 1px solid #000 and padding-bottom: 3px.

edit: 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.

edited Jul 12 '23 at 02:06

Penny Liu

15,447
5
79
98

answered Nov 18 '13 at 12:50

Venu immadi

1,585
11
20

score 0 · Answer 4 · answered Jul 12 '23 at 02:41

If you ever feel that your line is too close, we actually have a text-underline-offset feature that allows you to control the distance between the underline and the text.

body {
  font-family: Verdana;
}

span {
  color: #FF0033;
  font-size: 2rem;
  text-decoration: #FF0033 underline 0.2rem;
  text-decoration-style: double;  /* default is solid */
  text-underline-offset: 1rem;
}

<span>PayPayカード</span>

Spacing between text and underline

4 Answers4