CSS 생성 콘텐츠가 웹 레이아웃에서 유연한 테두리 길이를 어떻게 생성할 수 있습니까?

유연한 테두리 길이 제어

웹 레이아웃을 디자인할 때 특정 요소의 테두리 길이를 제어해야 하는 경우가 흔합니다. 페이지에 추가 요소를 추가하여 이를 달성할 수 있지만 CSS의 강력한 생성 콘텐츠 기능을 사용하는 더 멋진 솔루션이 있습니다.

다음 시나리오를 고려해보세요.

기존 하단 테두리가 있고 요소의 중간점까지만 확장되는 왼쪽 테두리를 추가하려고 합니다.

CSS 솔루션:

이 문제를 해결하려면 , CSS 생성 콘텐츠가 구출됩니다. 작동 방식은 다음과 같습니다.

div {
  position: relative;
}

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

1. 컨테이너 위치 지정:
   의 위치를 ​​상대 위치로 설정하여 생성된 콘텐츠에 대한 참조 프레임을 설정합니다.
2. 테두리 만들기: div:after 의사 요소 내에서 콘텐츠 속성을 사용하여 공백을 생성하고 검정색 배경색을 지정합니다.
3. 테두리 위치 및 크기 지정: 위치는 컨테이너 내에 위치하도록 절대값으로 설정됩니다. 하단 및 왼쪽 속성은 왼쪽 하단 모서리에 배치하는 데 사용됩니다. 높이를 50%로 설정하면 길이가 컨테이너 높이의 절반으로 제한됩니다. 너비는 1px로 설정되어 세로 테두리를 만듭니다.

CSS 생성 콘텐츠를 활용하면 추가 요소를 만들지 않고도 테두리를 추가하거나 수정할 수 있어 레이아웃의 유연성과 코드 유지 관리성이 향상됩니다.