title: css - create empty box for text next to text inside paragraph
body: <p>I have these classes:</p>
  
  <pre><code>.p_box {
      position: relative;
  }
  
  .p_box span {
      background-color: white;
      padding-right: 10px;
  }
  .p_box:after {
      content:"";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      top: 0;
      height: 20px;
      border: 1px solid black;
      z-index: -1;
  } 
  </code></pre>
  
  <p>But it does not really work. I used similar styling for this: <code>text _____</code> and it worked. But for box, it does not look the way I need.</p>
  
  <p>I need it to look like this (imagine that it is empty box with borders):</p>
  
  <pre><code>some text: |---------|
             |---------|
  </code></pre>
  
  <p>Here you can see how it looks like using that styling: <a href="https://jsfiddle.net/envLpanh/" rel="nofollow noreferrer">https://jsfiddle.net/envLpanh/</a></p>
  
  <p>As you can see in example, upper line of the border is hidden where text is, but lower one is not. Also in my application it looks a bit different than in jsfiddle. Both upper and lower borders are hidden where text is, but left border is empty and it looks something like this:</p>
  
  <pre><code>some text: -------|
             -------|
  </code></pre>
  
  <p>P.S. I guess it looks that way because it just hides part of the box and then it looks like left border disappeared. So maybe there is some better approach for that.</p>
  
  <p><strong>Update</strong></p>
  
  <p>To better understand what I need, look at this picture:</p>
  
  <p><a href="https://i.stack.imgur.com/Oyfc5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Oyfc5.png" alt="enter image description here"></a></p>
  
  <p>So that empty box should appear something like this:</p>
  
  <p><code>&lt;p class="p_box"&gt;Test:&lt;/p&gt;</code> And then after word <code>Test</code>, empty box would appear.</p>
  
  <p><strong>Update2</strong></p>
  
  <p>Using <code>left: fixed px number;</code> is not fully working solution, because it always uses fixed left position and if text differs on each case, it will look messy. Like in this example: <a href="https://jsfiddle.net/envLpanh/8/" rel="nofollow noreferrer">https://jsfiddle.net/envLpanh/8/</a></p>