title: Create a div with a line through the middle of a circle with text in the centre
body: <p><img src="https://i.stack.imgur.com/aiefb.png" alt="enter image description here"></p>
  
  <p>Is it possible to create a div with a line through the middle of a circle with text in the centre like above? It needs to be responsive so it will scale with the page. here is my code so far. I need a way to draw the line behind the circle now</p>
  
  <p><a href="http://jsfiddle.net/Jyjjx/87/" rel="nofollow noreferrer">http://jsfiddle.net/Jyjjx/87/</a></p>
  
  <pre><code>    &lt;div class="container"&gt;
      &lt;div class="round-button"&gt;
          &lt;div class="round-button-circle"&gt;&lt;span class="round-button"&gt;G&lt;/span&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;div&gt;
  
  .container {
      width:100%;
      height:100%;
      background:red;
  }
  .round-button {
      width:25%;
  }
  .round-button-circle {
      width: 100%;
      height:0;
      padding-bottom: 100%;
      border-radius: 50%;
      border:10px solid #cfdcec;
      overflow:hidden;
      background: #4679BD;
      box-shadow: 0 0 3px gray;
  }
  .round-button span {
      display:block;
      float:left;
      width:100%;
      padding-top:50%;
      padding-bottom:50%;
      line-height:1em;
      margin-top:-0.5em;
      text-align:center;
      color:#e2eaf3;
      font-family:Verdana;
      font-size:1.2em;
      font-weight:bold;
      text-decoration:none;
  }
  </code></pre>