Overlap div on before, css

1

How to overlay the contents of the div on the element before itself? I teentando make the straight line does not appear when stowing the words, to be like this:

  

--------- dsdsdsds --------

.abc {
    text-align: center;
    font-size: 13px;
    color: #C1BEBE;
    background-color: #F2F2F2;
    padding: 5px;
    margin: 23px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    position: relative;
    z-index: 999;
}
.abc::before {
    content: '';
    border-bottom: 1px solid #C2BFBF;
    width: 300px;
    float: left;
    margin-left: -43px;
    position: relative;
    top: 9px;
    z-index: -13333;
}
<div style="width:300px">
  <div class="abc">ab c mdo emosd sd</div>
</div>
    
asked by anonymous 09.07.2015 / 17:43

1 answer

0

If you remove the z-index from the element that will then the ::before will already work as you want.

.abc {
    text-align: center;
    font-size: 13px;
    color: #C1BEBE;
    background-color: #F2F2F2;
    padding: 5px;
    margin: 23px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    position: relative;
/*    z-index: 999; <---retirei */
}

jsFiddle: link

    
09.07.2015 / 17:59