border: 2px dashed #000; &::before { width: 2px; // 선의 두께 height: 100%; /* linear-gradient를 이용한 세로 점선 제어 to bottom 방향으로 색상 50%, 투명 50%를 반복합니다. */ background-image: linear-gradient(to bottom, var(--level) 50%, transparent 50%); /* 핵심 조절 포인트: - 앞의 100%는 가로 너비 - 뒤의 15px가 점선 한 마디의 길이입니다. - 이 값을 키우면 간격이 넓어지고, 줄이면 촘촘해집니다. */ background-size: 100% 6px; ..