title: Underlining lines in full width, not only text
body: <p>Hi,<br />I'm currently trying to set something up with HTML/CSS that looks like a post-it note.</p>
  
  <p>An <em>Image</em> of what I'm aiming at</p>
  
  <p><a href="https://i.stack.imgur.com/Hq5sF.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/Hq5sF.jpg" alt="image"></a></p>
  
  <p>Please note that <strong>every line</strong> should be underlined, no matter how many characters are in that line. Also every new line should be underlined completely.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;p&gt;
      &lt;img src="http://trööt.net/img/pin.png" alt="Stecknadel"/&gt;
      &lt;font&gt;Heading&lt;/font&gt;&lt;br /&gt;
      &lt;span class="blockMargin"&gt;
      &lt;span class="underline"&gt;
          &lt;strong&gt;Subheading&lt;/strong&gt; text text text
      &lt;/span&gt;
      &lt;/span&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>p {
      background-Color: #ffc; 
      padding: 1em; 
      width: 40em; 
      box-shadow: 5px 5px 3px 0px rgba(119,119,119,0.7); 
      text-align: justify;
  }
  img{
      float: None;  
      height: 4em; 
      display: block; 
      margin-left: Auto; 
      margin-right: Auto;
  }
  
  .blockMargin{
      display: block; 
      margin-bottom: -1px;
  }
  
  .underline{
      border-bottom: 1px dotted #c03;
  }
  </code></pre>
  
  <p>This is the code I'm currently using (got the idea already from stackoverflow.com). However, it doesn't underline the lines complete but works exactly like <code>text-decoration: underline</code>...</p>
  
  <p>Any ideas? <em>Maybe I should add that I create this using WordPress and the Nuclear-Theme.</em></p>
  
  <p>Thank you very much for your help!</p>
  
  <p>Example on JSFiddle: <a href="http://jsfiddle.net/8w9Lj7nd/" rel="noreferrer">http://jsfiddle.net/8w9Lj7nd/</a></p>