使CSS伪元素:在与主元素相同的高度之前

Question

我一直在寻找并且未能自己找到解决方案.我正在尝试创建一个基本的可满足代码编辑器,对于行号,我选择在CSS伪元素中使用计数器设置的每一行使用段落.这是小提琴:http://jsfiddle.net/zppb29jw/

问题是,如果段落有点长,文本的其余部分将在我的计数器伪元素下面.我想拉伸:在计数器之前与段落的高度相同.

我已尝试使用position:relative段落和position:absolute; height:100%p:之前的伪元素,如下所述:伪元素如何检测非伪元素的高度？

这在我的情况下不起作用,因为我不希望p:before元素覆盖并覆盖段落,我只想要与现在相同的行为,只是希望p:before元素在与main相同的高度上拉伸p.

我也不希望线条拉伸超过包装容器的宽度.我一直在尝试很多方法,但未能找到解决方案.

Answer 1

而不是height使用position:relativeP和absolute对前

Js Fiddle

在css中添加了新属性

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

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

编辑

这应该是第二个问题: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>