내 Div 너비보다 짧은 테두리를 만들려면 어떻게 해야 합니까?

Div 너비보다 얕은 테두리 길이

귀하의 코드는 너비가 200픽셀이고 하단에 1픽셀의 자홍색 실선 테두리가 있는 div 요소를 정의합니다. 가장자리. 그러나 div의 너비를 변경하지 않고 이 테두리의 길이를 100픽셀로 제한하는 방법을 찾고 있습니다.

의사 요소가 해결책을 제공합니다. 의사 요소는 DOM 트리에 추가된 요소로, 기존 요소의 일부 스타일을 지정할 수 있습니다. 이 경우 테두리 역할을 하는 의사 요소를 생성할 수 있습니다.

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

div의 왼쪽 하단에 절대적으로 위치하는 이 의사 요소는 원하는 테두리 길이인 100픽셀을 복제합니다. 너비 속성을 조정하면 div 자체 너비에 영향을 주지 않고 테두리 길이를 쉽게 제어할 수 있습니다.

위 내용은 내 Div 너비보다 짧은 테두리를 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!