Question

I am currently working on a project in which I am using some divs, and the :after pseudo-element. I would like to be able to center the :after text inside the div. Can anybody help me out here?

Example of problem: http://jsfiddle.net/JohnFish/7ra5t/

Answer 1

I think you just have to add a text-align: center in your CSS:

.example {
    background: black;
    height: 250px;
    width: 500px;
    text-align: center
}
.example:after {
    content: "+";
    color: white;
    font-size: 100px;
}

If you also want vertical alignment:

.example {
    background: black;
    height: 250px;
    width: 500px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.example:after {
    content: "+";
    color: white;
    font-size: 100px;
}