Center content in a :after element

Question

I have a jsfiddle here - http://jsfiddle.net/Lxve3ubd/

I'm creating an :after element that contains an '+'

The element has a circulat border.

I need to center the '+' in the circle, I need to increase the size of the '+' as well.

Is it possible to center this content.

    .box{
        background: red;
        height: 100px;
        margin: 50px;
        width: 100px;
        position: relative;
    }

    .box:after{
        border: 2px solid red;
        border-radius: 30px;
        content: "+";
        display: inline-block;
        height: 40px;
        font-size: 2.5em;
        //line-height: 2.5em;
        position: absolute;
        top: 0;
        right: -100px;
        width: 40px;
        vertical-align: center;
        padding: 0;
    }

Answer 1

The easiest way would be to add line-height: 40px (this only works if you are sure the text will be on one line) and text-align: center; to .box:after.

.box{
    background: red;
    height: 100px;
    margin: 50px;
    width: 100px;
    position: relative;
}

.box:after{
    border: 2px solid red;
    border-radius: 30px;
    content: "+";
    display: inline-block;
    height: 40px;
    font-size: 2.5em;
    //line-height: 2.5em;
    position: absolute;
    top: 0;
    right: -100px;
    width: 40px;
    vertical-align: center;
    padding: 0;
    text-align: center;
    line-height: 40px;
}

<div class="box"></div>