Text With ::before And ::after Not Centering Correctly?

So I've got some text with an arrow in the pseudo ::after element. The arrow is a div with a border-bottom and border-right set to 1px solid. Here's the CSS: #arrow::after { po

Solution 1:

I'm not sure this has anything to do with the pseudo elements. In your styles for #arrowcontainer, you have height: 20px set, which is why the container only contains half of the text. If you remove that, it should contain the p element.

As for the positioning of the text, since the #arrow paragraph is set to float: left, it positions itself to the left of its container, which stays at 40% of the width of the page, hence the extra space on the right side.

Long story short, unless you need those styles for other things, I'd start with the following edits:

#arrowcontainer {
    /* height: 20px; */width: 40%;
    text-align: center;
    margin-left: 30%;
    margin-top: 100px;
}

#arrow {
    /* float: left; */
}

Code Pen for reference:

http://codepen.io/a_double/pen/WbxZJq

Hope that helps!