css 我如何复制一个顶部对齐内容和内联网址的有序列表?

r3i60tvu  于 2023-03-05  发布在  其他
关注(0)|答案(1)|浏览(99)

新手在这里有一个巨大的麻烦,试图复制这种有序列表风格。
我尝试了一些样式技术,并取得了一些进展,但无法添加内联链接,因为我将所有内容放入内容标记中。
有什么方法可以实现这种风格的数字,如2行首字下沉与内联网址?
绝望。

py49o6xq

py49o6xq1#

您可以替换pseudo elements的默认列表样式,并使用counters进行动态编号:

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>

相关问题