CSS만으로 사전에 줄 번호 만들기

CSS만으로 사전에 줄 번호 만들기

---

각 줄 앞에 줄 번호가있는 코드 사전 상자의 스타일을 지정하려고합니다. 저는 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 전용 솔루션과의 브라우저 호환성은 무엇입니까?

---

카운터가 증가하지 않는 이유는 무엇입니까?

상위 태그 수준에서 카운터를 재설정하거나 생성하지 않습니다. pre선택기에 다음 줄을 추가하면 코드가 제대로 작동합니다. counter-reset부모 수준에서 카운터를 만들지 않으면 (을 사용하여 ) 각 요소는 자체 카운터를 만든 다음 증가시킵니다.

counter-reset: line;

---

카운터는 언제 생성됩니까?

로부터 W3C 사양 :

counter-reset 속성은 요소에 새 카운터를 만듭니다.

counter-set 및 counter-increment 속성은 기존 카운터의 값을 조작합니다. 그들은 아직 요소에 주어진 이름의 카운터가없는 경우에만 새 카운터를 만듭니다 .

이 경우 발생하는 것은 counter-reset속성 을 사용하여 카운터를 만들지 않았 으므로 의사 요소 선택기 의 counter-increment속성 span:before이 주어진 이름의 카운터를 만들고 증가시킵니다.

---

카운터는 현재 값을 어떻게 알 수 있습니까?

다시 W3C 사양에서 :

요소에 이전 형제가있는 경우 형제의 모든 카운터를 상속해야합니다 . 그렇지 않고 요소에 상위가있는 경우 상위의 모든 카운터를 상속해야합니다 . 그렇지 않으면 요소에 빈 카운터 세트가 있어야합니다.

그런 다음 요소는 문서 순서에서 바로 앞의 요소에서 카운터 값 을 상속합니다 .

카운터는 의사 요소에서만 생성되기 때문에 부모 ( span)는 생성을 인식 span하지 못하므로이 카운터 의 형제 는 카운터를 상속하지 않습니다. 카운터를 상속하지 않기 때문에 이전 요소에서도 현재 값을 얻지 못합니다.

---

부모에서 카운터를 만드는 이유는 무엇입니까?

카운터가에서 생성 될 때 pre태그 수준, 카운터는 다음 자식 요소의 각 (즉, 각각에 전달 span하고에 각이 설정 span:before에 대해 알고 또는이 카운터를 상속 것입니다) 지금의 증가 문은 span:before단지를 증가 것 부모로부터받은 카운터의 값.

이제 각각 은 이전 형제 span의 line카운터를 상속하므로 문서 순서의 이전 요소에서 현재 값도 상속하므로 1에서 2, 3 등으로 계속 올라갑니다.

---

스팬 또는 사전 작업에서 카운터 증가를 사용하는 이유는 무엇입니까?

As you've guessed, the counter-increment property creates a new counter when there is no existing counter and so adding counter-increment: line on the span will create a counter on the first span that is encountered. Now, since each sibling of the span inherits this counter, it doesn't create a new one every time and rather just inherits the value from the preceding element. Thus this approach will work but it is always better to create the counter explicitly using a counter-reset statement.

---

How is the browser support?

Browser support for CSS counters is unbelievably good. It is not a new thing in CSS and support for it is available even in IE8.

---

Demo:

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;
  counter-reset: line;
}
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>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
</pre>

---

You have to increment line in your span:

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

Have a look at this updated jsfiddle.

---

Hi you need to reset the counter on a previous / higher loaded item, check out https://jsfiddle.net/n2xkgt7s/2/ pre { counter-reset: line; }

참고URL : https://stackoverflow.com/questions/40842277/create-line-numbers-on-pre-with-css-only