如何更改文本装饰的长度/位置:下划线? [英] How to change the length/position of text-decoration:underline?

问题描述

我想在带下划线的地方加一些下划线.我还希望能够更改下划线的位置(将其移至单词下方左右).这似乎是一个非常简单的任务，但我无法使其正常工作.

I would like to have some words underlined where the underline can be a different length. I would also like to be able to change the position of the underline (move it further left or right under the word). It seemed to be a pretty easy task, but I can't get it to work.

.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).

推荐答案

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

Use gradient and you can easily adjust size and position:

.underline {
  background-image:linear-gradient(#5fca66,#5fca66);
  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;
}
.small {
  background-size:50% 1px;
}

.left {
  background-position:bottom left;
}

.center-close {
  background-position:bottom 5px center;
}

.right {
  background-position:bottom right;
}

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

body {
  font-size:30px;
}

This is a <span class="underline">sentence</span>. I would like some words to have 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
be centered under the word, for example).

这篇关于如何更改文本装饰的长度/位置:下划线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！