CSS 그라디언트를 사용하여 밑줄 길이와 위치를 어떻게 사용자 정의할 수 있나요?

밑줄 스타일 지정: 길이 및 위치 제어

밑줄은 일반적으로 텍스트를 강조하는 데 사용됩니다. 그러나 길이와 위치가 고정되어 있어 맞춤 제작에 한계가 있습니다. 이 가이드에서는 CSS 그라데이션을 사용하여 밑줄의 길이와 위치를 변경하는 방법을 살펴봅니다.

그라디언트 사용

그라디언트는 밑줄을 조작하는 유연한 방법을 제공합니다. 배경 그라데이션을 사용하면 밑줄 친 부분의 크기와 위치를 모두 조정할 수 있습니다.

.underline {
  background-image: linear-gradient(#5fca66 0 0);
  background-position: bottom center; /* Adjust position */
  background-size: 80% 2px; /* Control length and height */
  background-repeat: no-repeat;
  padding-bottom: 4px; /* Can also affect position */
}

길이와 위치 조정

배경 크기를 수정하여 속성을 사용하여 밑줄의 길이와 높이를 제어할 수 있습니다. 예:

.small {
  background-size: 50% 1px;
}

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

밑줄 위치를 변경하려면 배경 위치 속성을 조정하세요. 예를 들면 다음과 같습니다.

.left {
  background-position: bottom left;
}

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

.right {
  background-position: bottom right;
}

추가 컨트롤

padding-bottom 속성은 밑줄 위치를 미세 조정하는 데에도 사용할 수 있습니다(특히 함께 사용할 경우). background-position 속성을 사용합니다.

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

.far {
  padding-bottom: 10px;
}

예

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

이 예는 CSS 그래디언트로 가능한 다양한 길이 및 위치 조정을 보여줍니다.

위 내용은 CSS 그라디언트를 사용하여 밑줄 길이와 위치를 어떻게 사용자 정의할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!