HTML: Table row highlight - css

Question

I followed Creating CSS3 Circles connected by lines to create circles-connected-by-lines as row elements of a HTML Table. I have also enabled row highlighting on hover.
My code can be found here:
`https://codepen.io/bhaktaonline/pen/XzoVPr`
The problem is when I hover and the row is highlighted, I am loosing the lines that are connecting the circles. (in this case, the line connecting the two circles vanishes in the highight color).
Appreciate some insight on the problem.

Answer 1

This behaviour is a result of the negative value you have specified for the z-index property of the pseudo-element li::before.
Remove this z-index property declared on li::before, instead declare a z-index value on the list items (li.data), since it is a positioned element already (position: relative), a z-index property value will apply, .eg:
li.data {
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
border-radius: 2em;
background: dodgerblue;
margin: 0 1em;
display: inline-block;
color: white;
position: relative;
/* additional */
z-index: 1;
}
Code Snippet Demonstration:
ul.bigger {
font-size: 1.3em;
}
ul.highlight-active li.active::before {
font-size: 1.6em;
background: green;
}
li.data {
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
border-radius: 2em;
background: dodgerblue;
margin: 0 1em;
display: inline-block;
color: white;
position: relative;
/* additional */
z-index: 1;
}
li.ack {
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
border-radius: 2em;
background: MediumSeaGreen;
margin: 0 1em;
display: inline-block;
color: white;
position: relative;
}
li::before {
content: '';
position: absolute;
top: .9em;
left: -4em;
width: 4em;
height: .2em;
background: Gray;
}
li:first-child::before {
display: none;
}
.active {
background: dodgerblue;
}
.active~li {
background: lightblue;
}
.active~li::before {
background: lightblue;
}
body {
font-family: sans-serif;
padding: 2em;
}
.table {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 8px;
}
.row1 {
border: 1px solid #ddd;
padding: 8px;
}
.retransmission {
background-color: #0;
}
tr:nth-child(odd) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ffff99;
}
.row2 {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
<h2 id="ack_summary">Summary</h2>
<table style="width: 100%;">
<tr>
<th>Data/Ack Distribution - transfer 1, Packets 17 - 25</th>
</tr>
<tr>
<td>
<br>
<ul class="bigger highlight-active">
<li class="data">3</li>
<li class="ack">3</li>
</ul>
<br>
<h4>Cumulative Ack's distribution</h4>
<div id="chartContainer121" class="chartContainer"></div>
</td>
</tr>
</table>
Edit
In light of recent developments (as mentioned in the comments), rather declare the z-index property on the nested table cell tag, e.g:
td {
z-index: 9;
position: relative; /* required */
}
This way, any nested element will not be obscured by the containing element's background-color property. (expand updated code snippet below to observe this behaviour).
In addition, you can restore the negative z-index value initially declared on li::before.
ul.bigger {
font-size: 1.3em;
}
ul.highlight-active li.active::before {
font-size: 1.6em;
background: green;
}
li.data {
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
border-radius: 2em;
background: dodgerblue;
margin: 0 1em;
display: inline-block;
color: white;
position: relative;
}
li.ack {
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
border-radius: 2em;
background: MediumSeaGreen;
margin: 0 1em;
display: inline-block;
color: white;
position: relative;
}
li::before{
content: '';
position: absolute;
top: .9em;
left: -4em;
width: 4em;
height: .2em;
background: Gray;
z-index: -1;
}
li:first-child::before {
display: none;
}
.active {
background: dodgerblue;
}
.active ~ li {
background: lightblue;
}
.active ~ li::before {
background: lightblue;
}
body {
font-family: sans-serif;
padding: 2em;
}
.table {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
.row1 {
border: 1px solid #ddd;
padding: 8px;
}
.retransmission {
background-color: #0;
}
tr:nth-child(odd){background-color: #f2f2f2;}
tr:hover {background-color: #ffff99;}
.row2 {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
/* Additional */
td {
z-index: 9;
position: relative;
}
<h2 id="ack_summary">Summary</h2>
<table style="width: 100%;">
<tr>
<th>Data/Ack Distribution - transfer 1, Packets 17 - 25</th>
</tr>
<tr>
<td>
<br>
<ul class="bigger highlight-active">
<li class="data">3</li>
<li class="ack">3</li>
<li class="data">5</li>
<li class="ack">2</li>
</ul>
<br>
<h4>Cumulative Ack's distribution</h4>
<div id="chartContainer121" class="chartContainer"></div>
</td>
</tr>
</table>
I'd recommend further reading to understand the stacking context and how this generally applies to the z-index property:
Understanding CSS z-index - CSS | MDN
z-index - CSS | MDN
The stacking context - CSS | MDN