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 {
    position: relative;
    top: 5px;
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    border-bottom: 1px solid white;
    border-right: 1px solid white;
    transform: rotate(-45deg);
}

#arrow:hover {
    color: #404040;
    cursor: pointer;
}

#arrow:hover::after {
    border-color: #404040;
}

I have the text that the arrow is attached to in a div, and I've centered the div, and I set text-align: center in the div, which in theory should be centering the text with the arrow. The problem is that it's very far off. Originally, I believed that it was because the ::after element was taking up invisible extra space, so I added an invisible arrow to the ::before element to see if that evened it out. And it didn't. Here's a picture:

I then found out that it is clearly a problem with only the ::after element, because the div I have it in is unusually large after the arrow. Here's what I mean:

The blue box near In Construction represents the containing div. There's a huge space at the end... and I don't know why. It's also supposed to be containing the whole thing, but as you can see it cuts off about halfway up.

I've considered setting a negative margin-right on the ::after element, but I don't know how much I need to set it to. Does anyone know what's going on? Is there any way to get rid of this space? I'm pretty sure there's nothing else on the page that would be interfering.

EDIT Someone asked for complete HTML and CSS, which is quite a lot, but ok.

<!DOCTYPE html>
<html>
<head>
<title>Koowalk Games - Home</title>
<link rel="stylesheet" href="koowalk.css"/>
</head>
<body>
<h4 id="header">KOOWALK</h4>
<h4 id="headerb">GAMES</h4>

<p>Hello. We're Koowalk Games. We make games.</p>

<div id="work">
    <p id="workheader">Games</p>

    <div id="workbar"></div>

    <div id="arrowcontainer">
        <p id="arrow">In Construction</p>
    </div>

    <div class="gameleft">
        <p class="headerleft">Game Title</p>

        <p class="bodyleft">This will be a description of the game. Below this will be a super sexy screen render of the game. Cause I know how much you love pictures. For some reason. I don't really know why. Maybe it's cause you're an idiot. I think you're an idiot. I think Noah thinks you're an idiot too. If your wondering why it's taking me so long to develop this site, it's cause I completely fucked up the layout on my first iteration and had to redesign from scratch in order for it to resize properly. Web development looks easy, but let me tell you, it can be a bitch. A lot. Float based layouts = love. Float based layouts = life.</p>
    </div>


    <div class="gameright">
        <p class="headerright">Game Title</p>

        <p class="bodyright">This will be a description of the game. Below this will be a super sexy screen render of the game. Cause I know how much you love pictures. For some reason. I don't really know why. Maybe it's cause you're an idiot. I think you're an idiot. I think Noah thinks you're an idiot too. If your wondering why it's taking me so long to develop this site, it's cause I completely fucked up the layout on my first iteration and had to redesign from scratch in order for it to resize properly. Web development looks easy, but let me tell you, it can be a bitch. A lot. Float based layouts = love. Float based layouts = life.</p>
    </div>

    <div class="gameleft">
        <p class="headerleft">Game Title</p>

        <p class="bodyleft">This will be a description of the game. Below this will be a super sexy screen render of the game. Cause I know how much you love pictures. For some reason. I don't really know why. Maybe it's cause you're an idiot. I think you're an idiot. I think Noah thinks you're an idiot too. If your wondering why it's taking me so long to develop this site, it's cause I completely fucked up the layout on my first iteration and had to redesign from scratch in order for it to resize properly. Web development looks easy, but let me tell you, it can be a bitch. A lot. Float based layouts = love. Float based layouts = life.</p>
    </div>

    <div class="gameright">
        <p class="headerright">Game Title</p>

        <p class="bodyright">This will be a description of the game. Below this will be a super sexy screen render of the game. Cause I know how much you love pictures. For some reason. I don't really know why. Maybe it's cause you're an idiot. I think you're an idiot. I think Noah thinks you're an idiot too. If your wondering why it's taking me so long to develop this site, it's cause I completely fucked up the layout on my first iteration and had to redesign from scratch in order for it to resize properly. Web development looks easy, but let me tell you, it can be a bitch. A lot. Float based layouts = love. Float based layouts = life.</p>
    </div>
</div>

<div id="inprogress">
    <p id="inheader">Games We're Working On</p>

    <div id="inbar"></div>

    <p id="inintro">These are some games we're working on right now. <span>Subscribe to our email list</span> for updates.</p>

    <div class="inprogresssubsection">
        <p class="progressheader">Some Stupid Game</p>

        <p class="progresscontent">Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words</p>
    </div>

    <div class="inprogresssubsection">
        <p class="progressheader">Some Stupid Game</p>

        <p class="progresscontent">Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words Words words words words words words words words words</p>
    </div>
</div>

<div id="staff">

</div>
<script type="text/javascript">
    var bar = document.getElementById("workbar");
    var bar2 = document.getElementById("inbar");
    var x = 0;

    window.onload = change;

    function change() {
        requestAnimationFrame(color);
    }

    function color() {
        bar.style.background = "hsl(" + x + ", 100%, 50%)";
        bar2.style.background = "hsl(" + x + ", 100%, 50%)";
        if (x < 358) {
            x++;
            requestAnimationFrame(color);
        }
        else {
            x = 0;
            requestAnimationFrame(color);
        }
    }
</script>
</body>
</html>

CSS:

@font-face {font-family: "Veger"; src: url('Fonts/Veger(light).ttf'); }
@font-face {font-family: "Kloe"; src: url('Fonts/ff4a_kloe_thin-web.ttf'); }

::selection {
    background-color: #004089;
    color: white;
}

::-moz-selection {
    background-color: #004089;
    color: white;
}

body {
background: #5a5a5a;
font-family: Veger;
color: white;
text-align: center;
overflow: hidden;
}

#header {
font-size: 100px;
color: #49ffdc;
}

#headerb {
font-size: 100px;
margin-top: -145px;
color: #ffff63;
}

p {
font-family: Kloe, sans;
font-size: 40px;
margin-left: 15%;
margin-right: 15%;
margin-top: -40px;
}

/*Work Tile*/

#work {
position: absolute;
dispay: inline-block;
left: 0px;
right: 0px;
margin: 0;
margin-left: 0%;
padding: 0;
width: 100%;
background: #ff4545;
margin-top: 100px;
}

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

#arrow {
float: left;
}

#arrow::before {
position: relative;
top: 5px;
content: "";
display: inline-block;
width: 30px;
height: 30px;
border-bottom: 1px solid;
border-right: 1px solid;
transform: rotate(135deg);
}

#arrow::after {
position: relative;
top: 5px;
content: "";
display: inline-block;
width: 30px;
height: 30px;
border-bottom: 1px solid white;
border-right: 1px solid white;
transform: rotate(-45deg);
}

#arrow:hover {
color: #404040;
cursor: pointer;
}

#arrow:hover::after {
border-color: #404040;
}

#workheader {
font-family: Kloe, sans;
font-size: 80px;
margin-top: 10px;
}

#workbar {
float: left;
width: 50%;
margin-left: 25%;
margin-right: 25%;
height: 3px;
margin-top: -70px;
background: hsl(0, 100%, 50%);
}

/*Work Subtiles*/

.gameleft {
float: left;
clear: both;
width: 25%;
margin-left: 20%;
margin-bottom: 50px;
margin-top: 30px;
background: #5a5a5a;
color: white;
font-family: Kloe, sans; 
}

.headerleft {
margin-top: 10px;
font-size: 50px;
}

.bodyleft {
font-size: 15px;
margin-bottom: 300px;
}

.gameright {
float: right;
width: 25%;
margin-right: 20%;
margin-bottom: 50px;
margin-top: 30px;
background: #5a5a5a;
color: white;
font-family: Kloe, sans;
}

.headerright {
margin-top: 10px;
font-size: 50px;
}

.bodyright {
font-size: 15px;
margin-bottom: 300px;
}

/*In Progress Title -- NOTE: The in-progress section MUST ALWAYS BE SHORTER THAN THE WORK SECTION!!! ALWAYS!!! LIKE LITERALLY ALWAYS MAN!!!! CAUSE FORMATTING!!!*/

#inprogress {
position: absolute;
dispay: inline-block;
left: 0px;
right: 0px;
margin: 0;
margin-left: 100%;
padding: 0;
width: 100%;
background: #ff4545;
margin-top: 100px;
}

#inheader {
font-family: Kloe, sans;
font-size: 80px;
margin-top: 10px;
}

#inbar {
float: left;
width: 50%;
margin-left: 25%;
margin-right: 25%;
height: 3px;
margin-top: -70px;
background: hsl(0, 100%, 50%);
}

#inintro {
font-family: Kloe, sans;
font-size: 25px;
margin-top: -20px;
margin-bottom: 125px;
}

#inintro span {
color: #5a5a5a;
}

#inintro span:hover {
cursor: pointer;
color: white;
}

/*In Progress Subsections*/

.inprogresssubsection {
float: left;
width: 80%;
margin-left: 10%;
margin-bottom: 50px;
background: #5a5a5a;
}

.progressheader {
float: left;
font-size: 50px;
text-align: left;
margin-left: 2%;
margin-top: 0px;
}

.progresscontent {
float: left;
font-size: 15px;
text-align: left;
margin-left: 2%;
margin-top: -40px;
margin-bottom: 500px;
width: 90%;
}

/*Staff*/

#staff {

}

I know the formatting is a bit off, but I'm not going through all that and indenting it by 4 spaces.

回答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!

来源：https://stackoverflow.com/questions/27549099/text-with-before-and-after-not-centering-correctly

标签

html

css

pseudo-element