HTML, Create line numbers for large lines

Question

I have the following code that creates automatic line numbers for each div with the class "lineNum". I want to create line numbers also for line breaks (in a code snippet, the line between lines 1 and 2). Thank!

.container {direction:rtl; counter-reset: line;}
.container .lineNum {display: flex;line-height: 1.5rem;}
.lineNum>center, .lineNum>right, .lineNum>left, .lineNum>span 
{width: 100%;}

.container .lineNum:before 
{
  width: 2%;font-weight: bold;
  counter-increment: line;content:counter(line);
  display: inline-block;
  background-color: lightgray;
  margin-left: 10px;
  padding-right: .5em;
}

<div class="container">
<div class="lineNum"><span>במהלך תקופה זו, גדלנו מקבוצה קטנה של עורכים לקהילה מגוונת של עורכים, מפתחים, קוראים, תורמים ושותפים. איפה נהיה בעוד 15 שנה? איזה תפקיד נמלא בעולם? מי עוד יצטרף לתנועה? מה אופי העבודה הניצבת לפנינו? שאלות אלו ייענו על ידי תנועת ויקימדיה כולה במהלך השבועות הקרובים, במסגרת התהליך האסטרטגי לשנת 2017, המתנהל בימים אלו.</span></div>
<div class="lineNum"><span>תצלום לוויין של ארץ ישראל, משנת 2003, הכולל את מדינת ישראל, שטחי הרשות הפלסטינית, וחלקים מירדן, לבנון, סוריה ומצרים</span></div></div>

Run code

edit: next result expected

Answer 1

If you need a gap between each class .lineNum, just add margin-top: 10px;. I added a snippet below to show you.

.container {direction:rtl; counter-reset: line;}
.container .lineNum {display: flex;line-height: 1.5rem;}
.lineNum>center, .lineNum>right, .lineNum>left, .lineNum>span 
{width: 100%;}

.lineNum {margin-top: 10px;} 
       
.container .lineNum:before 
{
  width: 2%;font-weight: bold;
  counter-increment: line;content:counter(line);
  display: inline-block;
  background-color: lightgray;
  margin-left: 10px;
  padding-right: .5em;
}

<div class="container">
<div class="lineNum"><span>במהלך תקופה זו, גדלנו מקבוצה קטנה של עורכים לקהילה מגוונת של עורכים, מפתחים, קוראים, תורמים ושותפים. איפה נהיה בעוד 15 שנה? איזה תפקיד נמלא בעולם? מי עוד יצטרף לתנועה? מה אופי העבודה הניצבת לפנינו? שאלות אלו ייענו על ידי תנועת ויקימדיה כולה במהלך השבועות הקרובים, במסגרת התהליך האסטרטגי לשנת 2017, המתנהל בימים אלו.</span></div>
<div class="lineNum"><span>תצלום לוויין של ארץ ישראל, משנת 2003, הכולל את מדינת ישראל, שטחי הרשות הפלסטינית, וחלקים מירדן, לבנון, סוריה ומצרים</span></div></div>

Run code