4
\$\begingroup\$

I tried my hand at making a numbered line list.

I would like some feedback on my use of CSS and if this approach (using a numbered list) is considered a good solution.

body {
  background: black;  
}

.terminal {
  background-color: black;
  padding: 0em;
  width: 70em;
  color: #99ffcc;
}

.terminal li {
  background: #313131;
  padding: 0.4em 0;
  counter-increment: li;
}

.terminal ol {
  background: #515151;
  counter-reset: li;
  list-style: none;
}

.terminal li::before {
  content: counter(li);
  padding-right: 1em;
  display: inline-block; 
  width: 1em;
  margin-left: -1.5em;
  margin-right: 0.5em; 
  text-align: right; 
  direction: rtl;
  color: gray;
}

.terminal li:first-child {
  padding: 1em 0 0.5em 0;
}

.terminal li:last-child {
  padding: 0.5em 0 1em 0;
}
<div class="terminal">
  <ol>
    <li>sudo apt-get update</li>
    <li>sudo update-alternatives --install &lt;bin command path&gt; &lt;command name&gt; &lt;link to executable&gt; &lt;priority&gt;</li>
    <li>mvn clean package</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
  </ol>
</div>

\$\endgroup\$
0

1 Answer 1

1
\$\begingroup\$

'considered a good solution' is subjective, and relative to the scope of your project, especially given there were no performance/compatibility concerns listed. IMO, you have a good solution here. Using :before or :after pseudo classes gives you inherent text selection boundaries which is great! (no one wants to copy line numbers when selecting code snippet text)

However, if this was purely an example of accomplishing familiarity with counters is beyond me, so consider that you're example is intended for code snippets it might be best to keep it in a tag that best represents the content. For example <pre><code>.

This identifies sound page structure, which only good things come from that like SEO compliance and browser support. The good ole vendor pre-fix can be annoying to track, but they are there for a reason. Let the user experience content in a way that their preferred browser implements. (Not that you need a prefix here, just demonstrating why keeping it relative to the content can benefit users, as well as developers/site owners). And lastly, of course the accessibility argument.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.