CSS에서 예측 가능한 반복 패턴을 표현하는 방법은 무엇입니까?

Question

스타일 시트에서 다음 CSS 스타일을 표현하는 세련된 (즉, 비 장황한) 방법이 있습니까?

for (var i = 1; i < 20; i++) { 
    var nestedLists = 'ul '; 
    var selector = 'left: ' + (144 + (18 * i)) + 'px;'; 
    var lastRule = document.styleSheets[0].cssRules.length; 
    document.styleSheets[0].insertRule('.my-class ' + nestedLists.repeat(i) + ' li::after {' + selector + '}', lastRule); 
} 

하지만 표현하는 간결한 CSS - 기본 구문의 어떤 종류를 찾고 있어요 :

.my-class ul li::after {left: 162px;} 
.my-class ul ul li::after {left: 180px;} 
.my-class ul ul ul li::after {left: 198px;} 
.my-class ul ul ul ul li::after {left: 216px;} 
.my-class ul ul ul ul ul li::after {left: 234px;} 
.my-class ul ul ul ul ul ul li::after {left: 252px;} 
.my-class ul ul ul ul ul ul ul li::after {left: 270px;} 
.my-class ul ul ul ul ul ul ul ul li::after {left: 288px;} 
.my-class ul ul ul ul ul ul ul ul ul li::after {left: 306px;} 
.my-class ul ul ul ul ul ul ul ul ul ul li::after {left: 324px;} 
.my-class ul ul ul ul ul ul ul ul ul ul ul li::after {left: 342px;} 
.my-class ul ul ul ul ul ul ul ul ul ul ul ul li::after {left: 360px;} 
.my-class ul ul ul ul ul ul ul ul ul ul ul ul ul li::after {left: 378px;} 
.my-class ul ul ul ul ul ul ul ul ul ul ul ul ul ul li::after {left: 396px;} 
.my-class ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul li::after {left: 414px;} 
.my-class ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul li::after {left: 432px;} 
.my-class ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul li::after {left: 450px;} 
.my-class ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul li::after {left: 468px;} 
.my-class ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul li::after {left: 486px;} 

은 내가 계산 자바 스크립트에서 다음 루프를 사용하여 CSSOM에 위의 스타일 규칙을 추가 할 수 있다는 사실을 알고 가능한 경우 위의 줄.

예 :CSS 사용자 정의 등록 정보를 사용하여 뭔가를 영리하게 할 수 있습니까? 이하 또는 말대꾸를 사용

---

하시기 바랍니다 어떤 솔루션이 없습니다. 감사. 여기

---

는 절대 위치 ::after 가상 엘레멘트 디스플레이 스크린이다 질문 본문에 언급 된 바와 같이

Answer 1

을 한 가지 방법은 쓰기 일부 자바 스크립트를 배포하는 CSSOM에 대한 CSS 규칙, 계산식 :

예제 :

for (var i = 1; i < 20; i++) { 
 
    var nestedLists = 'ul '; 
 
    var selector = 'left: ' + (144 + (18 * i)) + 'px;'; 
 
    var lastRule = document.styleSheets[0].cssRules.length; 
 
    document.styleSheets[0].insertRule('.my-class ' + nestedLists.repeat(i) + ' li::after {' + selector + '}', lastRule); 
 
    console.log(document.styleSheets[0].cssRules[lastRule].cssText); 
 
}