DEV Community

mommocmoc
mommocmoc

Posted on

Answer: How to change the length/position of text-decoration:underline?

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; /* this can also control the position

텍스트 데코레이션은 텍스트 길이에 맞게 길이가 제한됨
=> 이 방법으로 원하는 길이/위치/두께 조절이 비교적 쉽고빠름

Top comments (0)