We would like to know how to use :before line on table-cell element.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#wrapper {<!-- w ww . j a v a 2 s .com-->
margin: 40px 0 0 0;
position: relative;
background: yellow;
display: inline-block;
}
#wrapper>div {
width: 33%;
display: table-cell;
vertical-align: middle;
height: 75px;
width: 60px;
border: 1px solid #ccc;
text-align: center;
position: relative;
}
.col2:before {
content: '';
position: absolute;
top: -7px;
height: 5px;
background: lightblue;
left: -1px;
right: -1px;
z-index: 50;
}
.col3 {
}
</style>
</head>
<body>
<div id="wrapper">
<div class="col1">col1 col1 col1</div>
<div class="col2">col2 col2 col2</div>
<div class="col3">col3 col3 col3</div>
</div>
</body>
</html>
The code above is rendered as follows: