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,#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;
}

.right {
  background-position:bottom right;
}
.big {
  background-size:100% 3px;
}

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

Answer 2

.underline {
    position: relative;
}
.underline:before {
    content: '';
    position: absolute;
    display: block;
    /* you can adjust the properties to your liking */
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: 1px solid #5fca66;
}

Answer 3

这可以使用伪元素来完成。

.underline {

  position:relative;

}

.underline:after{
content: "";
position:absolute;
bottom:-2px;/*position the underline using left and bottom property*/
left:0;
width:50px;/* adjust the width of underline as you like*/
border-bottom:1px solid #ccc;/* adjust the underline width and color as you like*/

}

<p>This is <span class='underline'>sample</span> text</p>

使用CSS更改文本下划线的长度

3 个答案: