Hmm, can't you use CSS counters that get incremented on every rule and apply a custom, cyclic counter-style to them that contains the symbols you would like? Co

Hmm, can't you use CSS counters that get incremented on every rule and apply a custom, cyclic counter-style to them that contains the symbols you would like? Counters work independently of the depth of the element in the tree. Edit: like that: (sorry in advance, mobile users) @counter-style rulestyle { symbols: "*" ")" "+"; /* Symbols go here, images work too. */ system: cyclic; } body { /* Initialize counter somewhere. */ counter-reset: rules; } hr { /* Style <hr/> as wanted. */ border: none; text-align: center; } hr:before { counter-increment: rules; content: counter(rules, rulestyle); } Edit 2: according to caniuse.com this seems to be only properly supported in Firefox so far.