How to fix gap between &:after element?

Question

If you look closely at the screenshot below you can see there's a bit of a gap to the left of the arrows.

I think it happens when the element isn't pixel-aligned. How can I fix that?

.stepList {
  zoom: 1;
  list-style: none;
  padding: 0;
  margin: 0 -15px 10px -15px;
  border-color: #E7EAEC;
  border-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
}
.stepList:before,
.stepList:after {
  content: "";
  display: table;
}
.stepList:after {
  clear: both;
}
.stepList > li {
  float: left;
  text-align: center;
  background-color: white;
  position: relative;
}
.stepList > li.currentStep {
  background-color: #233646;
}
.stepList > li.currentStep:not(:last-child):after {
  border-left-color: #233646;
}
.stepList > li:hover {
  background-color: #B70103;
}
.stepList > li:hover .stepTitle {
  color: white;
}
.stepList > li:hover:not(:last-child):after {
  border-left-color: #B70103;
}
.stepList > li:not(:last-child):before,
.stepList > li:not(:last-child):after {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  z-index: 100;
}
.stepList > li:not(:last-child):after {
  border-color: rgba(35, 54, 70, 0);
  border-left-color: white;
  border-width: 14px;
  margin-top: -14px;
}
.stepList > li:not(:last-child):before {
  border-color: rgba(231, 234, 236, 0);
  border-left-color: #E7EAEC;
  border-width: 15px;
  margin-top: -15px;
}
.currentStep .stepTitle {
  color: white;
}
.stepNumber {
  display: inline-block;
  font-size: .9em;
  border-radius: 1em;
  text-align: center;
  line-height: 16px;
  padding: 0 .3333em;
  background-color: white;
  border: 2px solid #ccc;
  margin-right: 4px;
  color: black;
  font-weight: bold;
}
.stepWrap {
  padding: 4px 0;
  display: block;
}
a.stepWrap {
  text-decoration: none;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<ul class="stepList">
    <li class="currentStep" style="width:25%;">
        <span class="stepWrap"><span class="stepNumber">1</span><span class="stepTitle">Customer Information</span></span>
    </li>
    <li style="width:25%;">
        <a href="" class="stepWrap"><span class="stepNumber">2</span><span class="stepTitle">Passenger Information</span></a>
    </li>
    <li style="width:25%;">
        <a href="" class="stepWrap"><span class="stepNumber">3</span><span class="stepTitle">Trip Itinerary</span></a>
    </li>
    <li style="width:25%;">
        <a href="" class="stepWrap"><span class="stepNumber">4</span><span class="stepTitle">Miscellaneous</span></a>
    </li>
</ul>
</body>
</html>

I don't see any discernible gap at the left of any arrow. Can you make a screenshot with notations and arrows pointing to exactly where this gap is? Btw, please inform us of what browsers you are using and what type of computer as well (Mac or PC) — zer00ne, Apr 04 '16 at 01:37
I agree with @zer00ne's comment above. I too don't see any gaps or lines (though the screenshot is showing one). This link may help you just in case you are open to a change of approaches - http://stackoverflow.com/questions/27636373/how-to-make-this-arrow-in-css-only/28196665#28196665 — Harry, Apr 04 '16 at 06:46
@zer00ne Added an arrow: http://i.imgur.com/EXq9Lw7.png That screenshot was taken using Chrome on Win10. — mpen, Apr 04 '16 at 15:37
@Harry I'll try that solution, thanks. It looks like those pseudo-elements overlap the main part so that might prevent the gap. — mpen, Apr 04 '16 at 15:43

score 0 · Answer 1 · answered Apr 04 '16 at 05:17

I just adjust the border-left of the :before to 0px; Hope it is the right answer.

.stepList {
  zoom: 1;
  list-style: none;
  padding: 0;
  margin: 0 -15px 10px -15px;
  border-color: #E7EAEC;
  border-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
}
.stepList:before,
.stepList:after {
  content: "";
  display: table;
}
.stepList:after {
  clear: both;
}
.stepList > li {
  float: left;
  text-align: center;
  background-color: white;
  position: relative;
}
.stepList > li.currentStep {
  background-color: #233646;
}
.stepList > li.currentStep:not(:last-child):after {
  border-left-color: #233646;
}
.stepList > li:hover {
  background-color: #B70103;
}
.stepList > li:hover .stepTitle {
  color: white;
}
.stepList > li:hover:not(:last-child):after {
  border-left-color: #B70103;
}
.stepList > li:not(:last-child):before,
.stepList > li:not(:last-child):after {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  z-index: 100;
}
.stepList > li:not(:last-child):after {
  border-color: rgba(35, 54, 70, 0);
  border-left-color: white;
  border-width: 14px;
  margin-top: -14px;
}
.stepList > li:not(:last-child):before {
  border-color: rgba(231, 234, 236, 0);
  border-left-color: #E7EAEC;
  border-width: 15px;
  margin-top: -15px;
  border-left: 0px;
}
.currentStep .stepTitle {
  color: white;
}
.stepNumber {
  display: inline-block;
  font-size: .9em;
  border-radius: 1em;
  text-align: center;
  line-height: 16px;
  padding: 0 .3333em;
  background-color: white;
  border: 2px solid #ccc;
  margin-right: 4px;
  color: black;
  font-weight: bold;
}
.stepWrap {
  padding: 4px 0;
  display: block;
}
a.stepWrap {
  text-decoration: none;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<ul class="stepList">
    <li class="currentStep" style="width:25%;">
        <span class="stepWrap"><span class="stepNumber">1</span><span class="stepTitle">Customer Information</span></span>
    </li>
    <li style="width:25%;">
        <a href="" class="stepWrap"><span class="stepNumber">2</span><span class="stepTitle">Passenger Information</span></a>
    </li>
    <li style="width:25%;">
        <a href="" class="stepWrap"><span class="stepNumber">3</span><span class="stepTitle">Trip Itinerary</span></a>
    </li>
    <li style="width:25%;">
        <a href="" class="stepWrap"><span class="stepNumber">4</span><span class="stepTitle">Miscellaneous</span></a>
    </li>
</ul>
</body>
</html>

Win10, Chrome. Sometimes it lines up perfectly, sometimes it doesn't. Try adjusting the width of your browser or zooming. I'm pretty sure it's a pixel offset issue. — mpen, Apr 04 '16 at 15:31

How to fix gap between &:after element?

1 Answers1