创建一个div，其中一条线穿过圆圈的中间，文本位于中心

Question

是否可以创建一个div，其中一条线穿过圆圈的中间，中间的文字如上所示？它需要具有响应性，因此它将随页面一起扩展。到目前为止，这是我的代码。我现在需要一种在圆圈后面划线的方法

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