71

各行の前に行番号を付けてコードプレボックスのスタイルを設定しようとしています。私はCSSのみでそれを行うことを好みます。これは私がやったことです

pre {
  background: #303030;
  color: #f1f1f1;
  padding: 10px 16px;
  border-radius: 2px;
  border-top: 4px solid #00aeef;
  -moz-box-shadow: inset 0 0 10px #000;
  box-shadow: inset 0 0 10px #000;
}
pre span {
  display: block;
  line-height: 1.5rem;
}
pre span:before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  border-right: 1px solid #ddd;
  padding: 0 .5em;
  margin-right: .5em;
  color: #888
}
<pre>
  <span>lorem ipsum</span>
  <span>&gt;&gt; lorem ipsum</span>
  <span>lorem ipsum,\ </span>
  <span>lorem ipsum.</span>
  <span>&gt;&gt; lorem ipsum</span>
  <span>lorem ipsum</span>
  <span>lorem ipsum</span>
  <span>lorem ipsum</span>
</pre>

ただし、すべての行の番号は 1 です。インクリメントは機能しません。ここにjsfiddleがあります

  1. 私が間違っていることは何ですか？
  2. この CSS のみのソリューションとのブラウザの互換性は?
4

3 に答える 3

2

lineスパンをインクリメントする必要があります：

pre span {
    display: block;
    line-height: 1.5rem;
    counter-increment: line;
}

この更新されたjsfiddleを見てください。

于 2016-11-28T10:44:24.800 に答える