我怎样才能使 li 标签计数器样式在 DOM 中贯穿

Question

i want my li tag in a ol tag have a line all over it but it just put the line on the content of the li tag how can i make it work? my code:`

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);
`

my code is on the left side but i want it to be like the right side`` enter image description here

Answer 1

Use list-style-position: inside;

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

It's not supported in every browser but is supported on both Chrome/Chromium & Firefox.

Answer 2

If I am not misunderstanding then you want a border around the LI tag instead of having the text cut down with a line:

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