목차에 대해 CSS에서 선행 점을 어떻게 만들 수 있습니까?

CSS에서 선행 점 만들기

웹 디자인 영역에서는 안내하기 위해 목차에 선행 점을 표시해야 하는 경우가 많습니다. 독자의 눈. CSS를 사용하여 이를 달성하는 한 가지 효과적인 방법은 제공된 링크에 나와 있습니다: https://www.w3.org/Style/Examples/007/leaders.en.html.

여기 CSS 스니펫이 있습니다:

ul.leaders {
  max-width: 40em;
  padding: 0;
  overflow-x: hidden;
  list-style: none;
}

ul.leaders li:before {
  float: left;
  width: 0;
  white-space: nowrap;
  content:
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
}

ul.leaders span:first-child {
  padding-right: 0.33em;
  background: white;
}

ul.leaders span + span {
  float: right;
  padding-left: 0.33em;
  background: white;
}

이 CSS 솔루션은 "문자 상자"라는 기술을 활용하여 이미지나 기타 종속성 없이 점을 표시합니다. 의사 요소의 내용으로 점으로 구분된 일련의 공백 문자를 사용하여 목록 항목의 왼쪽에 점이 시작되는 듯한 느낌을 줍니다. 또한 CSS는 첫 번째 하위 범위와 모든 후속 범위에 흰색 배경을 적용하여 시각적으로 구분합니다.

프로젝트에 이 CSS를 구현하면 깨끗하고 균일한 선행 점이 있는 목차를 생성하여 전반적인 가독성과 사용자 경험.

위 내용은 목차에 대해 CSS에서 선행 점을 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!