CSS에서 밑줄의 길이와 위치를 어떻게 조정합니까?

CSS에서 밑줄 길이 및 위치 조정

텍스트 요소에 밑줄을 긋는 것은 간단한 작업일 수 있지만 밑줄의 길이와 위치를 사용자 정의하면 도전해 보세요. 밑줄 스타일을 정밀하게 제어할 수 있는 방법은 다음과 같습니다.

길이 및 높이 제어:

밑줄 길이를 결정하려면 background-size 속성을 사용하세요. 밑줄의 너비와 높이를 지정합니다(예: background-size: 80% 2px;). 백분율 값을 늘리면 밑줄이 길어지고 높이 값을 조정하면 선 두께가 제어됩니다.

위치 조정:

배경 위치 속성을 사용하면 텍스트에 상대적인 밑줄의 세로 위치입니다. 줄을 텍스트에 더 가깝게 이동하려면 패딩 하단 값을 줄이세요. 더 멀리 이동하려면 여백을 늘리세요.

맞춤 설정의 예:

다음은 밑줄 길이, 높이 및 위치를 수정하는 방법을 보여주는 예입니다.

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

이러한 기술을 활용하면 시각적인 매력을 높이고 텍스트의 가독성.

위 내용은 CSS에서 밑줄의 길이와 위치를 어떻게 조정합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!