추가 HTML 없이 CSS 테두리 길이를 어떻게 제어할 수 있나요?

CSS로 테두리 길이 사용자 정의

추가 요소를 추가하지 않고 테두리 길이를 제한하려는 경우 이를 우아하게 구현하는 CSS 솔루션입니다.

요소 위쪽으로만 확장되는 테두리를 만들려면 CSS를 활용할 수 있습니다. 생성된 콘텐츠. 수행 방법은 다음과 같습니다.

HTML:

<div>Lorem Ipsum</div>

CSS:

div {
  position: relative;
}

div:after {
  content: "";
  background: black;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;
  width: 1px;
}

이 CSS 스니펫에서:

• 위치: 상대 parent div를 사용하면 생성된 테두리의 위치를 ​​절대적으로 지정할 수 있습니다.
• content: ""는 사용자 정의 테두리 역할을 할 빈 요소를 생성합니다.
• background: black은 테두리 색상을 지정합니다.
• position: 절대값은 생성된 요소를 위치 지정 가능하게 만듭니다.
• bottom: 0 및 left: 0 테두리를 부모 요소의 왼쪽 하단에 배치합니다. div.
• height: 50%는 테두리를 상위 요소 높이의 절반으로 제한합니다.

이 기술은 왼쪽 하단 모서리에서 위로 절반만 확장되는 테두리를 생성합니다. 추가 HTML 요소나 형제 선택기가 필요하지 않습니다.

위 내용은 추가 HTML 없이 CSS 테두리 길이를 어떻게 제어할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!