CSS를 사용하여 내 Div 너비보다 작은 테두리를 어떻게 만들 수 있나요?

Div 너비보다 작은 테두리: 의사 요소를 사용한 솔루션

HTML 및 CSS에서 div 요소의 크기는 다음을 사용하여 설정할 수 있습니다. 너비 속성. 테두리 속성을 사용하여 테두리 크기를 설정할 수 있습니다. 그러나 div 너비보다 작은 테두리를 설정하려는 경우 직접적인 접근 방식으로는 충분하지 않습니다.

한 가지 해결책은 CSS 의사 요소를 사용하는 것입니다. :before 의사 요소를 div에 추가하고 절대 위치에 지정할 수 있습니다. 이를 통해 div 하단에서 확장되고 너비가 원하는 만큼만 요소를 생성할 수 있습니다.

div {
  width: 200px;
  height: 50px;
  position: relative;
  z-index: 1;
  background: #eee;
}

div:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 50%; /* or 100px */
  border-bottom: 1px solid magenta;
}

이 접근 방식은 :before 의사 요소의 너비 속성에 지정된 너비만큼만 div 하단에 테두리를 효과적으로 생성합니다.

위 내용은 CSS를 사용하여 내 Div 너비보다 작은 테두리를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!