Need some help, of setting that staright line with numbers 'straight'

I’m working on the documentation page ‘a hell of a job pff…’ aniway
i try to made a part copy of the mdn keyframes doc, ‘so like fcc did with theirs’ and now ‘changed plan’ after that syntax topic of keyframes give my own twist on it! ’

BUT, the problem is the vertical numbers line. if i go to 10 , 'content: counter(linenumber); ’ ‘then the line infront of it, doesn’t stay in place… hope someone can find out wat i did wrong. i use verry much mdn webdocs, and then inspect element, and then developer tools, to study and research how they did their code for the website. here my project: hope someone can tell wat i have to do now. i searched already the whole net,… https://codepen.io/Den96/pen/NWqqGOp THNX! :pray:

and here the mdn webdoc, i try half to copy ; if needed’

@Den96, instead of doing all that stuff between the <code> </code> tags you can either;
Nest multi-line <code> snippets in <pre> </pre> tags to preserve whitespace and line breaks or you can do code { white-space: pre; } in your CSS and skip the <pre> tag.

As an aside;

  • On using codepen. codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.

    • The link to your font would go in the box labeled ‘Stuff for <head>’
  • Don’t use <br> to force spacing. Use margin and/or padding in CSS.

2 Likes

I was able to get this to work by doing the following:

  • remove the :after CSS styling completely for the <span> with the line number
  • set the width of that <span> to something like 1.5em.
  • set a right border on that <span> to “1px solid #999

That’s it, now the line is straight for both single and double digit line numbers

Also, the light gray on even lighter gray background is not accessible. Use a color contrast checker to make sure that the line numbers are dark enough.

Hello Dan, Roma is right, you are making yourself a mess in the >code< area

i whould recomend you to read the Documentation of >code

there are plenty things you can do playing arround with formating it

Here is the w3c documentation page if you want to give it a glimpse

<code <pre <var <kbd <samp Documentation