title: Place a character as background in a div
body: <p>I want to create the following layout:</p>
  
  <pre><code>+----------------------------------+
  |               TITLE              |
  |                                  |
  |                 +                |
  |                                  |
  |            (drop here)           |
  +----------------------------------+
  </code></pre>
  
  <p>using the following HTML:</p>
  
  <pre><code>&lt;div class="drop-box"&gt;
    &lt;p&gt;TITLE&lt;/p&gt;
    &lt;p&gt;(drop here)&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and CSS:</p>
  
  <pre><code>.drop-box {
    width: 300px;
    height: 150px;
    border: 1px solid black;
    text-align: center;
  }
  
  .drop-box:before {
    content: "+";
    width: 100%;
    height: 100%;
    font-size: 3em;
    text-align: center;
    line-height: 150px;
    display: block;
  }
  </code></pre>
  
  <p>Problem is that the text is now placed below the box with the '+' inside. How can I get the text to be placed inside the box. I've tried to use <code>position: relative</code> for the <code>p</code> tags but that doesn't work.</p>
  
  <p>I've created a pen for this here: <a href="http://codepen.io/kdbruin/pen/ryMjgb" rel="nofollow noreferrer">http://codepen.io/kdbruin/pen/ryMjgb</a></p>