html - 如何更改文本装饰的长度/位置 :underline?

Question

我想在下划线可以是不同长度的地方加下划线。我还希望能够更改下划线的位置(在单词下方向左或向右移动)。这似乎是一项非常容易的任务，但我无法让它工作。

.underline {

  border-bottom: 1px solid #5fca66;
  padding-bottom: 5px;

}

This is a <span class="underline">sentence</span>.  I would like some words to have longer <span class="underline">underlines</span> than others.  I would also like to be able to change the <span class="underline">position</span> of the <span class="underline">underline</span>(to be centered under the word, for example).

Answer 1

使用渐变，您可以轻松调整大小和位置:

.underline {
  background-image: linear-gradient(#5fca66 0 0);
  background-position: bottom center; /*Adjust the background-position to move the line*/
  background-size: 80% 2px; /*Adjust the background size to control length and height*/
  background-repeat: no-repeat;
  padding-bottom: 4px; /* this can also control the position */
}

.small {
  background-size: 50% 1px;
}

.left {
  background-position: bottom left;
}

.center-close {
  background-position: bottom 5px center;
  background-image: linear-gradient(red 0 0);
}

.right {
  background-position: bottom right;
}

.close {
  padding-bottom: 0;
  background-position: bottom 5px center;
  background-image: linear-gradient(blue 0 0);
}

.big {
  background-size: 100% 3px;
}

.far {
  padding-bottom: 10px;
  background-image: linear-gradient(purple 0 0);
}

body {
  font-size: 30px;
}

This is a <span class="underline">sentence</span>. I would like <span class="underline close">some words to have</span> longer <span class="underline left">underlines</span> than others. I would <span class="underline big center-close">also like</span> to be able to change the <span class="underline small right">position</span> of the <span class="underline big">underline</span>(to
<span class="underline far">be centered under the word, for example</span>).