在HTML中使用阿拉伯文字母的有序项目符号列表

我想制作一个html格式的阿拉伯文本项目符号列表，如下所示：

أ。ا

ب。ا㶊ط㶊㶏㶌ي

ت。ا㶊㶊㶊㶊ثث

ث。ا㶈㶈㶈㶈㶒ع

我尝试了几件事，包括：

li {
    list-style: AL;
}

@counter-style AL {
    symbols: 'أ' 'ب' 'ت' 'ث'
    suffix: " ";
}

---

但它不起作用。有可能做到这一点吗？如何做到？

我尝试了一种解决方法，它可以：

1：将列表样式类型设置为无

ul {
    list-style-type: none;
}

2：在脚本中创建一个数组，其中包含阿拉伯字母html十六进制代码

var bulletclasses = [" - &#x0623"," - &#x0628"," - &#x062A"];
var i = 0;

3：然后，当你在列表中添加新行时，在文本中加入十六进制代码

$("ul").append("<li>" + todoText + bulletclasses[i] + "</li>");
i = i + 1;

$（“ul”）.append（“
”+todoText+bulletclasses[i]+“
”）；
i=i+1；

我不擅长使用

JS

和

CSS

，可能还有其他更好、更简洁的方法，但是动态设置符号可以完成这项工作，假设您的列表不会超过28项

我还考虑过为每个阿拉伯字母创建一个

CSS

类，然后每当你想在列表中添加一个新项目时，你就可以使用

js

将这个类添加到每个

，这将是一件乏味的事情

不幸的是，到2020年，这两种浏览器都没有浏览器支持

但是，这里有一个仅适用于CSS的解决方案，基于：

ol.abjd{
列表样式：无；
}
ol.abjd>li:：之前{
显示：内联块；
宽度：1米；
保证金权利：-1.5em；
左边距：0.5em；
文本对齐：左对齐；
方向：ltr；
}
李：第n个孩子（1）：{内容：“.أ”}之前
李：第n个孩子（2）：{content:“.ب”}之前
李：第n个孩子（3）：{内容：“
李：第n个孩子（4）：{内容：“.د”}之前
李：第n个孩子（5）：{内容：“
李：第n个孩子（6）：{内容：“.و”}之前
李：第n个孩子（7）：{内容：“
李：第n个孩子（8）：{内容：“
李：第n个孩子（9）：{内容：“.ط”}之前
李：第n个孩子（10）：{内容：“.ى”}之前
李：第n个孩子（11）：{内容：“
李：第n个孩子（12）：在{内容：“.ل”}之前
李：第n个孩子（13）：在{内容：“
李：第n个孩子（14）：在{内容：“.ن”}之前
李：第n个孩子（15）：在{内容：“.س”；}之前
李：第n个孩子（16）：在{内容：“
李：第n个孩子（17）：在{内容：“.ف”}之前
李：第n个孩子（18）：在{content:“.of ”；}之前
李：第n个孩子（19）：在{内容：“.ق”}之前
ol.abjd>li:n第n个孩子（20）：在{content:“.qi”；}之前
李：第n个孩子（21）：在{内容：“.ž”；}之前
李：第n个孩子（22）：在{内容：“.ت”；}之前
李：第n个孩子（23）：{内容：“.ث”}之前
李：第n个孩子（24）：在{内容：“
李：第n个孩子（25）：在{内容：“.ذ”；}之前
李：第n个孩子（26）：在{内容：“.ضـ”}之前
李：第n个孩子（27）：在{内容：“.ظ”；}之前
李：第n个孩子（28）：在{内容：“.غـ”}之前

请注意，此代码仅为具有类

abjd

的

设置样式。例如：

عنц1
عنц2
…

我在一些字母后使用了

U+0640阿拉伯语的TATWEEL

而不是

U+200D零宽度的JOINER

，因为我发现它看起来更好。根据您的喜好定制