浏览器 Firefox 中 span 和它的伪 ::before 之间的重叠

Question

目标：我希望红线紧跟在文本之后并右对齐。

现实：

这是简化代码：

.margetabonglet {
    padding: 30px;
    background-color: #f6f6f6;
    border-radius: 0px 8px 8px 8px;
    border: 1px solid #fff;
}

.soustitre {
    font-weight: bold;
    font-size: 14px;
    font-family: 'Source sans pro';
    padding-top: 15px;
    padding-bottom: 12px;
    color: #4D4D4D;
}

table {
    border-collapse: collapse;
    width: 100%;
}

.margetabonglet .soustitre span {
    padding-right: 5px;
    background-color: #f6f6f6;
    position: relative;
    z-index: 0;
}

 .margetabonglet .soustitre span::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    width: 91vw;
    background-color:  #DDD;
    z-index: -1;
}

.margetabonglet {
  padding: 30px;
  background-color: #f6f6f6;
  border-radius: 0px 8px 8px 8px;
  border: 1px solid #fff;
}

.soustitre {
  font-weight: bold;
  font-size: 14px;
  font-family: 'Source sans pro';
  padding-top: 15px;
  padding-bottom: 12px;
  color: #4D4D4D;
}

table {
  border-collapse: collapse;
  width: 100%;
}

.margetabonglet .soustitre span {
  padding-right: 5px;
  background-color: #f6f6f6;
  position: relative;
  z-index: 0;
}

.margetabonglet .soustitre span::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  width: 91vw;
  background-color: #DDD;
  z-index: -1;
}

<div class="margetabonglet">
  <table>
    <tr>
      <td class="soustitre"><span>Informations sur la macro</span></td>
      <td><span style=""></span></td>
    </tr>
  </table>


  <table>
    <tr>
      <td class="soustitre"><span>InfoEEEEEo</span></td>
      <td><span style=""></span></td>
    </tr>
  </table>


  <table>
    <tr>
      <td class="soustitre"><span>InformDDDDo</span></td>
      <td><span style=""></span></td>
    </tr>
  </table>


  <table>
    <tr>
      <td class="soustitre"><span>Informationo</span></td>
      <td><span style=""></span></td>
    </tr>
  </table>

</div>

https://jsfiddle.net/bh3Lrkz0/1/

我已经尝试将 "left" 属性添加到伪元素，但是，这些行不会正确对齐。

Answer 1

请按照以下步骤操作..

HTML

<td class="soustitre"><span><span>Informations sur la macro</span></span></td>

CSS

.margetabonglet .soustitre > span {
    padding-right: 5px;
    background-color: #f6f6f6;
    position: relative;
    z-index: 0;
}
 .margetabonglet .soustitre > span::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    width: 91vw;
    background-color:  #DDD;
    z-index: -1;
}
.margetabonglet .soustitre > span span{
    background-color:#f6f6f6; 
    padding-right: 5px;
}

浏览器 Firefox 中 span 和它的伪 ::before 之间的重叠

Overlapping between span and its pseudo ::before in browser Firefox

html

css

pseudo-element