如何在DOM中使li标记计数器样式行通过

Question

我希望ol标签中的li标签上有一行但它只是在li标签的内容上加了一行我怎样才能让它工作？我的代码：`

ol.type = "i";
var li1 = document.createElement("li");
var li2 = document.createElement("li");
var li3 = document.createElement("li");
var li4 = document.createElement("li");
var li5 = document.createElement("li");
li1.textContent = "user dashboard";
ol.appendChild(li1);
li2.textContent = "admin dashboard";
ol.appendChild(li2);
li3.textContent = "authentication";
ol.appendChild(li3);
var ul = document.createElement("ul");
var li11 = document.createElement("li");
var li12 = document.createElement("li");
var li13 = document.createElement("li");
li11.textContent = "login";
ul.appendChild(li11);
ol.appendChild(ul);
li12.textContent = "register";
li12.style.textDecoration = "line-through";
ul.appendChild(li12);
ol.appendChild(ul);
li13.textContent = "log out";
ul.appendChild(li13);
ol.appendChild(ul);
li4.textContent = "about page";
ol.appendChild(li4);
li5.textContent = "contact page";
li5.style.textDecoration = "line-through";
ol.appendChild(li5);
document.body.appendChild(ol);
`

我的代码在左边，但我希望它像右边一样``在此处输入图像描述

Answer 1

使用list-style-position: inside;

https://codepen.io/battletag13/pen/OJROGjr

并非所有浏览器都支持它，但Chrome/Chromic&Firefox。

Answer 2

如果我没有误解，那么你希望在LI标签周围有一个边框，而不是用一行来减少文本：

...
//li12.style.textDecoration = "line-through";
li12.style.border = "1px solid red";
...
//li5.style.textDecoration = "line-through";
li5.style.border = "1px solid red";