css의 부분 경계 : 창의적 환상

div {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
}

div:after {
  content: '';
  width: 60px;
  height: 4px;
  background: gray;
  position: absolute;
  bottom: -4px;
}

예를 들어, 왼쪽에서 60px 만 확장되는 하단 테두리가있는 350px 너비의 상자를 고려하십시오. 다음 CSS 코드로 복제 할 수 있습니다.

div { 너비 : 350px; 높이 : 100px; 배경 : LightGray; 위치 : 상대; 마진 : 20px; } div : {이후 { 콘텐츠: ''; 너비 : 60px; 높이 : 4px; 배경 : 회색; 위치 : 절대; 하단 : -4px; }

이 접근법은 다재다능하며 모든 현대식 브라우저에서 잘 작동합니다. 추가 마크 업이 필요하지 않으므로 깨끗하고 유지 관리 가능한 코드로 이어집니다. 또한 위치를 지원하지 않는 브라우저에서 우아하게 저하됩니다 : 절대.