-1

Should the following line of CSS work for adding padding to regular underlines? Not links, just when I underline one or more words for emphasis. Nothing seems to change.

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

Cheers!

Johannes
  • 64,305
  • 18
  • 73
  • 130
linski
  • 1
  • What do you mean by 'adding padding'? It seems to be working as it should. See: https://jsfiddle.net/uspv78my/1/ – Jonathan Apr 29 '20 at 22:42

2 Answers2

1

Underlined text doesn't have a class .underline whose settings you could change. It has a setting: text-decoration: underline , which is not the same as border-bottom. Some browsers allow additional parameters for text-decoration to style it to a limited extent, see https://caniuse.com/#search=text-decoration . However, the results really often look different between different browsers...

.a {
  text-decoration: underline;
}

.b {
  border-bottom: 1px solid black;
  padding-bottom: 3px;
}
<p>This is an example for <span class="a">underlined text</span> within a phrase. Usually a &lt;span&gt; element is used to apply "text-decoration: underline". The vertical distance to the baseline of the text depends on the browser and usually can't be changed.</p>
<p>A "border-bottom" is <span class="b">something completely different</span>. Here the distance to the text can be set manually by using a "padding-bottom".</p>
Johannes
  • 64,305
  • 18
  • 73
  • 130
0
span {
    text-decoration: underline dashed;
    text-underline-offset: 2px;
}
Alexandr Sitdikov
  • 1
  • 2
  • Your answer could be improved with supporting information as to how this solves the problem. This will help later readers to understand the solution. – Harrison May 19 '23 at 11:29