содержания Центра в: после того, как элементе

Question

У меня есть jsfiddle здесь - http://jsfiddle.net/Lxve3ubd/

Я создаю: после того, как элемент, который содержит «+»

Элемента имеет circulat границы.

Мне нужно центрировать «+» в круге, мне также нужно увеличить размер «+».

Можно ли центрировать это содержание.

.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

Самый простой способ - добавить line-height: 40px (это работает только если вы уверены, что текст будет на одной строке) и text-align: center; - .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>

Answer 2

вы можете использовать как этот

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

Я надеюсь, что это будет поможет вам.