CODEWITHSUNDEEP
htmlcssunderline
antonpuz
antonpuz

Reputation: 3316

Spacing between text and underline

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.

Upvotes: 9

Views: 28493

Answers (4)

Penny Liu
Penny Liu

Reputation: 17498

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>

Upvotes: 0

Venu immadi
Venu immadi

Reputation: 1605

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.

Upvotes: 0

Aaron Digulla
Aaron Digulla

Reputation: 328830

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>

Upvotes: 10

SW4
SW4

Reputation: 71230

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

Upvotes: 0

Related Questions