밑줄 모양을 제어하는 ​​방법

밑줄을 조정하여 시각적 매력과 가독성을 높일 수 있습니다. 텍스트 장식:밑줄의 길이와 위치를 조작하기 위해 그라데이션 사용과 관련된 간단하면서도 효과적인 기술이 있습니다:

.underline {
  background-image: linear-gradient(#5fca66 0 0);
  background-position: bottom center;
  background-size: 80% 2px;
  background-repeat: no-repeat;
  padding-bottom: 4px;
}

위치 조정:

• 선을 이동하려면 배경 위치 속성을 조정합니다.
• 예를 들어, 배경 위치: 왼쪽 하단; 줄을 텍스트 왼쪽으로 정렬합니다.

길이 조정:

• 길이를 제어하려면 배경 크기 속성을 조정합니다.
• 예: background-size: 50% 1px; 더 짧은 줄을 만듭니다.

추가 사용자 정의:

• 텍스트에 닫기: padding-bottom: 0; 선을 텍스트에 더 가깝게 가져옵니다.
• 텍스트에서 멀리: padding-bottom: 10px; 선과 텍스트 사이의 거리가 늘어납니다.
• 다른 색상: background-image 속성을 수정하여 선 색상을 사용자 정의합니다(예: background-image:linear-gradient(red 0 0) );.