Add border between list number and text

i want to separate the line number and the text in an ordered list. how do i do it? my original code is too complex so if it is possible to do it without using more tags like div or span, please tell me and help. i want to do it via styling ol or/and li(maybe default element or the pseudo element). my current approach is to add border-right around li::before, but this adds border around every li element so there is a bit of space above and bottom every line, it isn't connected. Please help!! https://sololearn.com/compiler-playground/WUvxP9Xr32xX/?ref=app

html css lists border

9th May 2025, 5:16 AM

Ace

9 Réponses

+ 5

Ace https://sololearn.com/compiler-playground/W8LQRLWzlzzS/?ref=app

9th May 2025, 5:37 AM

Alhaaz

+ 4

Ace Now check, i modified the code btw Bob_Li also got an awesome solution, go check it out too!

9th May 2025, 1:27 PM

Alhaaz

+ 2

Ace Now check

9th May 2025, 6:43 AM

Alhaaz

+ 1

thanks a lot this works 👍

9th May 2025, 8:01 AM

Ace

+ 1

Alhaaz sorry to mention again but now there is another problem. I cannot adjust the space between each line. I tried adjusting margin-bottom(negative value) and line height in li element, but this causes them to overlay on top of one another. so even when my desired space isn't reached and i need even lesser space between lines, the line numbers are already going inside one another. what do I do?? any help?

9th May 2025, 12:43 PM

Ace

+ 1

Alhaaz ...er...now the code texts overlap on top of one another. see this image to see what iam talking about(line height is set to 0.4em): https://imgur.com/a/yLnVKtA also i could not find the solution Bob_Li has as you said, link please?

9th May 2025, 3:03 PM

Ace

+ 1

Ace Setting line-height on pre style rule as well and editing that one works, not sure if it is flexible or maintainable though.

9th May 2025, 3:34 PM

Afnan Irtesum Chowdhury

+ 1

Ace it's basically the same as Alhaaz code, except it exploits the loophole difference between html and xhtml specs and does not close the li tag, resulting in a tighter layout... https://sololearn.com/compiler-playground/WrKIS08r20i9/?ref=app

9th May 2025, 4:35 PM

Bob_Li

Alhaaz Yes but that is not what I want. I want that line to be connected from top to bottom. In your and my code, it is seperated from every li element at top and bottom

9th May 2025, 5:45 AM

Ace