Создание псевдоэлемента CSS: до той же высоты, что и основной элемент

Ответ 1

вместо height используйте position:relative для p и absolute для

Js Fiddle

добавлены новые свойства в css

.editor p {
    position:relative;
    padding-left:3.5em;
}

.editor p:before {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
 }

Edit

Это должен быть второй вопрос: D

нажатие enter в Ie не создает br, тогда как в современных браузерах он создает br, используя :after, исправляет проблему, поэтому тег p не остается пустым

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>

Ответ 2

Поскольку вы хотите, чтобы номера строк и строки отображались в виде таблицы, естественный подход заключается в том, чтобы сделать их таблицей: объявить редактируемую область как таблицу (в смысле CSS), сделать строки строк и создать сгенерированную строку числовые ячейки таблицы:

.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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div> 

Ответ 3

http://jsfiddle.net/zppb29jw/2/

p {
    position:relative;
    left: 4em;
    ...

p:before {
    position:absolute;
    right:100%
    display:block;
    ...

это нормально для вас?

Ответ 4

.black_right{
    position: relative;
    display: table;
    width: 100%;
    z-index: 10;
}
.black_right::after{
    content: " "; 
    top: 0px;
    height: 100%;
    width: 100%;
    box-shadow: 500px 0px #000;
    position: absolute;
}