Search code examples
htmlcsshtml-lists

How do I reproduce an ordered list with top-aligned content and inline urls?

Novice here having a huge amount of trouble trying to replicate this ordered list style.

I've attempted with certain styling techniques and got some of the way there but wasn't able to add inline links as I was putting all the content into the content tag.

Any way to achieve this styling with numbers like 2-line drop caps with inline urls?

Desperate.

enter image description here

Solution

  • You can swap out the default list styling for pseudo elements and use counters for dynamic numbering:

    body {
  background: pink;
  color: steelblue;
  font-family: system-ui, sans-serif;
  max-width: 56ch;
}

ol {
  counter-reset: list;
}

li {
  position: relative;
  list-style: none;
  padding: 0.5em;
  counter-increment: list;
}

li::before {
  position: absolute;
  left: -1ch;
  font-size: 2em;
  content: counter(list);
}

strong {
  text-decoration: underline;
}
    <ol>
  <li>The bulk of all patents are crap. Spending time reading them is supid. It's up to the <strong>patent owner</strong> to do so, and to enforce them.</li>
  <li>Without requirements or design, programming is the art of adding bugs to an empty text file.</li>
  <li>(Lou Gerstner) The most <strong>amazing achievement</strong> of the computer software industry is its continuing cancellation of the steady and staggering gains made by the computer hardware industry.</li>
  <li>Programming today is a race between software engineers striving to build bigger and better idiot-proof programs</li>
</ol>