Center content in a :after element

HTML & CSS
1

Hi all

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

Dunno the exact circle you are going for.

Also // is an invalid CSS comment.

To horizontally center, text-align:center; is normally used.
Vertical centering is trickier but setting the height/line-height to match does the trick.

3

Here’s one closer visually (and probably safer to use.)

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.