<!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"); } ul { text-align: right; margin-right: 40px; font-family: "NotoNastaliqUrduWeb", sans-serif; counter-reset: c; list-style: none; } ul li::before { content: counter(c, arabic-indic) ""; counter-increment: c; unicode-bidi: bidi-override; } /* Force double-digit numbers to render "backwards" to match the testcase */ ul li:nth-child(10)::before { content: "٠١" ""; } ul li:nth-child(12)::before { content: "٢١" ""; } </style> </head> <body> <ul lang="ur" dir="ltr"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>