<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Arabic subtending mark, CSS counter, Noto Nastaliq Urdu</title> <style> @font-face { font-family: "NotoNastaliqUrduWeb"; src: url("../fonts/NotoNastaliqUrdu-Regular.ttf") format("truetype"); } p { margin-right: 40px; text-align: right; } ul { font-family: "NotoNastaliqUrduWeb", sans-serif; counter-reset: c 7; list-style: none; } ul.test li::before { content: "\0602" counter(c, arabic-indic); counter-increment: c; background: green; color: transparent; /* hide the glyphs to avoid Windows antialiasing artifacts; we only care about the width */ } ul.ref li::before { content: "\0602"; background: blue; color: white; } </style> </head> <body> <p>The width of the green bar should <b>increase</b> half-way down:</p> <ul class="ref" lang="ur" dir="rtl"> <li></li> </ul> <ul class="test" lang="ur" dir="rtl"> <li></li> <li></li> <!-- list item numbers 10-11 *should* make the subtending mark wider --> <li></li> <li></li> </ul> </body> </html>