Search code examples
htmlcssunderline

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.

Solution

  • 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>