Problème pour caller une list ul li dans un div

Bonjour.

J'apprends depuis peu (environ 1 ans) l'HTML le CSS et le JS,
et depuis le début de l'année 2019, je crée un site qui comporte un système de BBcode en JS entièrement fait par moi (ça marche plutôt bien sauf si on imbrique plusieurs balises identiques (mais c'est pas ça le problème)), et donc, dans ce BBcode, j'ai une balise " [ l i s t = " a " ] ", qui est remplacée par de l'html :

<ul type="a">
    <li>text 1</li>
</ul>

et le message est ensuite affiché dans un div, qui est lui même imbriqué dans un article plus principal.

Or, il se trouve que les balise de listes n’intègrent pas de

::marker

quand ils sont positionnée dans un div ou un article.

Mais j'ai vu sur différents sites qu'ils avaient réussi à contourner le problème, mais impossible de savoir comment...

Alors je demande sur ce site (ou j'ai appris 1/4 de mon savoir sur l'html css js ( les 3 autres sites sont : MDN moz://a, openClassroom et w3s) comment contourner ce problème qui me casse la tête depuis plus d'une semaine...

Merci à ceux qui prendront le temps de lire ce message et voir même d'y répondre.
Modifié par 7Manolo (27 Jul 2019 - 20:15)

C'est bon, j'ai trouvé une technique (temporaire peut-être, c'est pour ça que je ne marque pas le sujet comme résolut),
en fait, c'était très simple, j'ai pensé qu'il fallait mettre un

:: marker

.
Mais non, il faut mettre un

:: before

et faire :

ol {
	list-style: none;
	counter-reset: li;
}
ol[data="1"] > li::before {
	content: counter(li);
	counter-increment: li;
	display: inline-block;
	width: 1em;
	text-align: right;
	margin-right: 0.5em;
	direction: rtl;
}
ol[data="i"] > li::before {
	content: counter(li, lower-roman);
	counter-increment: li;
	display: inline-block;
	width: 1em;
	text-align: right;
	margin-right: 0.5em;
	direction: rtl;
}
ol[data="I"] > li::before {
	content: counter(li, upper-roman);
	counter-increment: li;
	display: inline-block;
	width: 1em;
	text-align: right;
	margin-right: 0.5em;
	direction: rtl;
}
ol[data="a"] > li::before {
	content: counter(li, lower-alpha);
	counter-increment: li;
	display: inline-block;
	width: 1em;
	text-align: right;
	margin-right: 0.5em;
	direction: rtl;
}
ol[data="A"] > li::before {
	content: counter(li, upper-alpha);
	counter-increment: li;
	display: inline-block;
	width: 1em;
	text-align: right;
	margin-right: 0.5em;
	direction: rtl;
}
ol[data="."] > li::before {
	content: counter(li, disc);
	counter-increment: li;
	display: inline-block;
	width: 1em;
	text-align: right;
	margin-right: 0.5em;
	direction: rtl;
}
ol[data="°"] > li::before {
	content: counter(li, circle);
	counter-increment: li;
	display: inline-block;
	width: 1em;
	text-align: right;
	margin-right: 0.5em;
	direction: rtl;
}
ol[data="+"] > li::before {
	content: counter(li, square);
	counter-increment: li;
	display: inline-block;
	width: 1em;
	text-align: right;
	margin-right: 0.5em;
	direction: rtl;
}

Merci quand même pour d'éventuelles d'autres réponses.

Hello,

Oui c'est une façon de faire.

Tant que tu y es, je te conseille de rassembler les déclarations identiques pour éviter toutes ces répétitions :

ol[data] > li::before {
	counter-increment: li;
	display: inline-block;
	width: 1em;
	text-align: right;
	margin-right: 0.5em;
	direction: rtl;
}
ol[data="i"] > li::before {
	content: counter(li, lower-roman);
}
ol[data="I"] > li::before {
	content: counter(li, upper-roman);
}
...

Pas bête, merci pour l'idée