我有一个进度条的代码，描述了支持服务单可能经历的生命周期：
.container {
width: 700px;
margin: 100px auto;
}
.progressbar {
counter-reset: step;
}
.progressbar li { /*name of incomplete tasks */
list-style-type: none;
width: 20%;
float: left;
font-size: 12px;
font-family: sans-serif;
position: relative;
text-align: center;
color: #7d7d7d;
}
.progressbar li:before { /*circle of incomplete tasks */
width: 20px;
height: 20px;
content: "";
counter-increment: step;
line-height: 20px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 5px auto;
border-radius: 50%;
background-color: white;
}
.progressbar li:after { /* line preceding incomplete tasks */
width: 100%;
height: 2px;
content: '';
position: absolute;
background-color: #7d7d7d;
top: 12px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.done { /* check mark and name of completed tasks */
color: #55b776;
}
.progressbar li.done:before { /* circles of completed tasks */
border-color: #55b776;
content: "\2713";
}
.progressbar li.done+li:after { /* line following completed tasks */
background-color: #55b776;
}<div class="container">
<ul class="progressbar">
<li class="done">Open</li>
<li class="done">In Progress</li>
<li>With Engineering</li>
<li>Resolution Provided</li>
<li>Closed</li>
</ul>
</div>
它完美无缺，但是当我尝试将其包含在格式化的文档中时，彩色条连接不同的阶段＆＃39;要么失去颜色要么停止存在。我认为这是因为背景颜色的不同实例相互重叠，但无论是否是这种情况，我不确定如何纠正或阻止他的发生。有人可以帮我理解我可能没有抓到的东西吗？
问题出现在哪里：
.container {
width: 700px;
margin: 100px auto;
}
.progressbar {
counter-reset: step;
}
.progressbar li {
/*name of incomplete tasks */
list-style-type: none;
width: 20%;
float: left;
font-size: 12px;
font-family: sans-serif;
position: relative;
text-align: center;
color: #7d7d7d;
}
.progressbar li:before {
/*circle of incomplete tasks */
width: 20px;
height: 20px;
content: "";
counter-increment: step;
line-height: 20px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 5px auto;
border-radius: 50%;
background-color: white;
}
.progressbar li:after {
/* line preceding incomplete tasks */
width: 100%;
height: 2px;
content: '';
position: absolute;
background-color: #7d7d7d;
top: 12px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.done {
/* check mark and name of completed tasks */
color: #55b776;
}
.progressbar li.done:before {
/* circles of completed tasks */
border-color: #55b776;
content: "\2713";
}
.progressbar li.done+li:after {
/* line following completed tasks */
background-color: #55b776;
}<!DOCTYPE html>
<html>
<div style="width:650px; background-color:#EEEEEE;">
<header>
<h1>
COMPANY
</h1>
</header>
<table width="95%" align="center" cellpadding="10" style="width:95%; background-color: #666666;">
<tbody>
<tr>
<td style="padding-left:15px">Case Number: 0000000</td>
</tr>
</tbody>
</table>
<table cellpadding="10">
<tbody>
<tr>
<td style="padding-left:35px">Date Opened: 10/31/2017 at 2:13 PM</td>
</tr>
</tbody>
</table>
<table width="95%" align="center" cellpadding="10" style="width:95%;background-color:white;">
<tbody>
<tr>
<td style="padding-left:20px;">
You are receiving this email because your case has been updated. Your case details and any updates can be found below this message.
<br /> If you wish to post a comment to the case you can simply reply to this email and your case will be updated. If you would like to include a screenshot or relevant log files you can do so by including them in your reply.
</td>
</tr>
<tr>
<td align="center" style="text-align: center;">
<span class="container">
<ul class="progressbar">
<li class="done">Open</li>
<li class="done">In Progress</li>
<li>With Engineering</li>
<li>Resolution Provided</li>
<li>Closed</li>
</ul>
</span>
</td>
</tr>
<tr>
<td style="padding-left:20px;">
In order to proceed with your case we will need additional information or clarification on the reported issue. Please provide the requested information within the next 4 days. If no response is received during this time we will temporarily archive your
case. Once you are ready to continue with simply reply to one of the case emails.
</td>
</tr>
<tr>
<td></td>
</tr>
<td>
<table cellpadding="5" style="border-collapse:collapse;">
<tbody>
<tr>
<td width="150" style="width:150px;background-color:#EEEEEE;padding-left:20px;border-left:10px solid white;">
<span style="background-color:#EEEEEE;">Subject</span>
</td>
<td width="350" style="width:350px;border:1px solid #EEEEEE;">TICKET TITLE HERE</td>
</tr>
<tr>
<td width="150" style="width:150px; background-color:#EEEEEE;padding-left:20px;border-left:10px solid white;">
<span style="background-color:#EEEEEE;">Description</span>
</td>
<td width="350" style="width:350px;border:1px solid #EEEEEE;">TICKET DESCRIPTION HERE</td>
</tr>
</tbody>
</table>
</td>
</tbody>
</table>
</div>
</html>
答案 0 :(得分：2)
z-index: -1;正在推送文档中其他元素后面的:after伪元素。
相反，请从z-index移除:after，然后将z-index的正值添加到:before。
.container {
width: 700px;
margin: 100px auto;
}
.progressbar {
counter-reset: step;
}
.progressbar li {
/*name of incomplete tasks */
list-style-type: none;
width: 20%;
float: left;
font-size: 12px;
font-family: sans-serif;
position: relative;
text-align: center;
color: #7d7d7d;
}
.progressbar li:before {
/*circle of incomplete tasks */
width: 20px;
height: 20px;
content: "";
counter-increment: step;
line-height: 20px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 5px auto;
border-radius: 50%;
background-color: white;
position: relative; /* ---------------- Added */
z-index: 1; /* ------------------------ Added */
}
.progressbar li:after {
/* line preceding incomplete tasks */
width: 100%;
height: 2px;
content: '';
position: absolute;
background-color: #7d7d7d;
top: 12px;
left: -50%;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.done {
/* check mark and name of completed tasks */
color: #55b776;
}
.progressbar li.done:before {
/* circles of completed tasks */
border-color: #55b776;
content: "\2713";
}
.progressbar li.done+li:after {
/* line following completed tasks */
background-color: #55b776;
}<!DOCTYPE html>
<html>
<div style="width:650px; background-color:#EEEEEE;">
<header>
<h1>
COMPANY
</h1>
</header>
<table width="95%" align="center" cellpadding="10" style="width:95%; background-color: #666666;">
<tbody>
<tr>
<td style="padding-left:15px">Case Number: 0000000</td>
</tr>
</tbody>
</table>
<table cellpadding="10">
<tbody>
<tr>
<td style="padding-left:35px">Date Opened: 10/31/2017 at 2:13 PM</td>
</tr>
</tbody>
</table>
<table width="95%" align="center" cellpadding="10" style="width:95%;background-color:white;">
<tbody>
<tr>
<td style="padding-left:20px;">
You are receiving this email because your case has been updated. Your case details and any updates can be found below this message.
<br /> If you wish to post a comment to the case you can simply reply to this email and your case will be updated. If you would like to include a screenshot or relevant log files you can do so by including them in your reply.
</td>
</tr>
<tr>
<td align="center" style="text-align: center;">
<span class="container">
<ul class="progressbar">
<li class="done">Open</li>
<li class="done">In Progress</li>
<li>With Engineering</li>
<li>Resolution Provided</li>
<li>Closed</li>
</ul>
</span>
</td>
</tr>
<tr>
<td style="padding-left:20px;">
In order to proceed with your case we will need additional information or clarification on the reported issue. Please provide the requested information within the next 4 days. If no response is received during this time we will temporarily archive your
case. Once you are ready to continue with simply reply to one of the case emails.
</td>
</tr>
<tr>
<td></td>
</tr>
<td>
<table cellpadding="5" style="border-collapse:collapse;">
<tbody>
<tr>
<td width="150" style="width:150px;background-color:#EEEEEE;padding-left:20px;border-left:10px solid white;">
<span style="background-color:#EEEEEE;">Subject</span>
</td>
<td width="350" style="width:350px;border:1px solid #EEEEEE;">TICKET TITLE HERE</td>
</tr>
<tr>
<td width="150" style="width:150px; background-color:#EEEEEE;padding-left:20px;border-left:10px solid white;">
<span style="background-color:#EEEEEE;">Description</span>
</td>
<td width="350" style="width:350px;border:1px solid #EEEEEE;">TICKET DESCRIPTION HERE</td>
</tr>
</tbody>
</table>
</td>
</tbody>
</table>
</div>
</html>
答案 1 :(得分：1)
将z-index: 3; position: relative;添加到before元素，将z-index: 0;添加到after元素
.container {
width: 700px;
margin: 100px auto;
}
.progressbar {
counter-reset: step;
}
.progressbar li {
/*name of incomplete tasks */
list-style-type: none;
width: 20%;
float: left;
font-size: 12px;
font-family: sans-serif;
position: relative;
text-align: center;
color: #7d7d7d;
}
.progressbar li:before {
/*circle of incomplete tasks */
width: 20px;
height: 20px;
content: "";
counter-increment: step;
line-height: 20px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 5px auto;
border-radius: 50%;
background-color: white;
z-index: 3;
position: relative;
}
.progressbar li:after {
/* line preceding incomplete tasks */
width: 100%;
height: 2px;
content: '';
position: absolute;
background-color: #7d7d7d;
top: 12px;
left: -50%;
z-index: 0;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.done {
/* check mark and name of completed tasks */
color: #55b776;
}
.progressbar li.done:before {
/* circles of completed tasks */
border-color: #55b776;
content: "\2713";
}
.progressbar li.done+li:after {
/* line following completed tasks */
background-color: #55b776;
}<!DOCTYPE html>
<html>
<div style="width:650px; background-color:#EEEEEE;">
<header>
<h1>
COMPANY
</h1>
</header>
<table width="95%" align="center" cellpadding="10" style="width:95%; background-color: #666666;">
<tbody>
<tr>
<td style="padding-left:15px">Case Number: 0000000</td>
</tr>
</tbody>
</table>
<table cellpadding="10">
<tbody>
<tr>
<td style="padding-left:35px">Date Opened: 10/31/2017 at 2:13 PM</td>
</tr>
</tbody>
</table>
<table width="95%" align="center" cellpadding="10" style="width:95%;background-color:white;">
<tbody>
<tr>
<td style="padding-left:20px;">
You are receiving this email because your case has been updated. Your case details and any updates can be found below this message.
<br /> If you wish to post a comment to the case you can simply reply to this email and your case will be updated. If you would like to include a screenshot or relevant log files you can do so by including them in your reply.
</td>
</tr>
<tr>
<td align="center" style="text-align: center;">
<span class="container">
<ul class="progressbar">
<li class="done">Open</li>
<li class="done">In Progress</li>
<li>With Engineering</li>
<li>Resolution Provided</li>
<li>Closed</li>
</ul>
</span>
</td>
</tr>
<tr>
<td style="padding-left:20px;">
In order to proceed with your case we will need additional information or clarification on the reported issue. Please provide the requested information within the next 4 days. If no response is received during this time we will temporarily archive your
case. Once you are ready to continue with simply reply to one of the case emails.
</td>
</tr>
<tr>
<td></td>
</tr>
<td>
<table cellpadding="5" style="border-collapse:collapse;">
<tbody>
<tr>
<td width="150" style="width:150px;background-color:#EEEEEE;padding-left:20px;border-left:10px solid white;">
<span style="background-color:#EEEEEE;">Subject</span>
</td>
<td width="350" style="width:350px;border:1px solid #EEEEEE;">TICKET TITLE HERE</td>
</tr>
<tr>
<td width="150" style="width:150px; background-color:#EEEEEE;padding-left:20px;border-left:10px solid white;">
<span style="background-color:#EEEEEE;">Description</span>
</td>
<td width="350" style="width:350px;border:1px solid #EEEEEE;">TICKET DESCRIPTION HERE</td>
</tr>
</tbody>
</table>
</td>
</tbody>
</table>
</div>
</html>