Create a div with a line through the middle of a circle with text in the centre

问题

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

http://jsfiddle.net/Jyjjx/87/

    <div class="container">
    <div class="round-button">
        <div class="round-button-circle"><span class="round-button">G</span>

        </div>
    </div>
<div>

.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;
}

来源：https://stackoverflow.com/questions/22444666/create-a-div-with-a-line-through-the-middle-of-a-circle-with-text-in-the-centre