title: Make CSS pseudoelement :before same height as main element
body: <p>I've been looking all over and failed to find a solution to this on my own. I'm trying to make a basic contenteditable code editor, and for the line numbers I have chosen to use a paragraph for each line with a counter set in a CSS pseudo element. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }
  
  .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;
    /*-webkit-user-select: none;
      user-select: none;*/
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="editor" contenteditable="true" spellcheck="false"&gt;
    &lt;p&gt;Some paragraph&lt;/p&gt;
    &lt;p&gt;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.&lt;/p&gt;
    &lt;p&gt;&amp;nbsp;&lt;/p&gt;
    &lt;p&gt;&amp;nbsp;&lt;/p&gt;
    &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that if the paragraph is a bit longer the rest of the text will go beneath my counter pseudoelement. I want to strech the :before counter to be the same height as the paragraph.</p>
  
  <p>I have tried using <code>position:relative</code> on the paragraph and <code>position:absolute; height:100%</code> on the p:before pseudoelement like explained here: <a href="https://stackoverflow.com/questions/7475430/how-can-the-pseudo-element-detect-the-height-of-the-non-pseudo-element">How can the pseudo element detect the height of the non-pseudo element?</a></p>
  
  <p>This does not work in my case because I don't want the p:before element to go over and cover the paragraph, I just want the same behaviour as now, just want the <code>p:before</code> element to strech at the same height as the main <code>p</code>. </p>
  
  <p>I also wouldn't want to have the line strech more than the width of the wrapper container. I've been trying many methods but failed to come to a solution.</p>