Make CSS pseudoelement :before same height as main element
Since you want the line numbers and lines appear in table-like manner, the natural approach is to make them table: declare the editable area as table (in the CSS sense), make the lines rows, and make the generated line numbers table cells:
.editor {
display: tablek;
border: 1px black solid;
font-family: "Consolas", "Monaco", "Courier New", monospace;
counter-reset: line;
width:90%;
height:350px;
overflow:scroll;
padding-left:0;
margin-left:0;
z-index:1;
}
.editor p {
display: table-row;
counter-increment: line;
background-color:#FFF;
text-align:left;
margin:0px;
z-index:2;
outline: none;
}
.editor p:before {
display: table-cell;
width:2em;
height:100%;
border-right: 1px black solid;
padding-right: 1em;
margin-right: 1em;
content: counter(line);
color:#FFF;
background-color:#006;
text-align:right;
/*-webkit-user-select: none;
user-select: none;*/
}<div class="editor" contenteditable="true" spellcheck="false">
<p>Some paragraph</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet nunc non pulvinar luctus. Cras finibus turpis at arcu mollis, nec fermentum mi pretium. Aliquam suscipit lacus sapien, eu fringilla enim malesuada quis. Sed ut tincidunt erat. In posuere vulputate venenatis. Mauris quis porta magna. Phasellus pharetra in nisl et luctus. Etiam in ultrices risus. Morbi vel dapibus ex. Suspendisse gravida libero non malesuada congue. Pellentesque ut nunc diam.</p>
<p> </p>
<p> </p>
<p> </p>
</div> Instead of height, rather use position: relative; for p, and position: absolute; for :before.
Js Fiddle
Here are the newly added CSS properties:
.editor p {
position: relative;
padding-left: 3.5em;
.editor p:before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
Edit
It should be a second question :D
Pressing Enter in IE will not create a br, whereas in modern browsers it creates a br using :after. Here is to guarantee so that p tag does not remain empty:
Js Fiddle
.editor {
display: inline-block;
border: 1px black solid;
font-family: "Consolas", "Monaco", "Courier New", monospace;
counter-reset: line;
width: 90%;
height: 350px;
overflow: scroll;
padding-left: 0;
margin-left: 0;
z-index: 1;
}
.editor p {
display: block;
counter-increment: line;
background-color: #FFF;
text-align: left;
margin: 0px;
z-index: 2;
outline: none;
position: relative;
padding-left: 3.5em;
}
.editor p:before {
display: inline-block;
width: 2em;
height: 100%;
border-right: 1px black solid;
padding-right: 1em;
margin-right: 1em;
content: counter(line);
color: #FFF;
background-color: #006;
text-align: right;
position: absolute;
top: 0;
bottom: 0;
left: 0;
/*-webkit-user-select: none;
user-select: none;*/
}
.editor p:after {
content: " "
}<div class="editor" contenteditable="true" spellcheck="false">
<p>Some paragraph</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet nunc non pulvinar luctus. Cras finibus turpis at arcu mollis, nec fermentum mi pretium. Aliquam suscipit lacus sapien, eu fringilla enim malesuada quis. Sed ut tincidunt erat.
In posuere vulputate venenatis. Mauris quis porta magna. Phasellus pharetra in nisl et luctus. Etiam in ultrices risus. Morbi vel dapibus ex. Suspendisse gravida libero non malesuada congue. Pellentesque ut nunc diam.</p>
<p>one</p>
<p>two</p>
<p>three</p>
</div>