html - 浏览器 Firefox 中 span 与其伪 ::before 之间的重叠
问题描述
这是简化的代码:
.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”属性添加到伪元素,但是这些行不会右对齐。
解决方案
请按照以下步骤..
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;
}
推荐阅读
- google-sheets - 计算联赛积分榜模板中的总比赛数
- javascript - 将字符串数组与对象数组进行比较并删除
- intellij-idea - IntelliJ IDEA - 在路径中查找被锁定在另一个窗口监视器中
- python - 如何通过逐行读取文件来制作json字符串?
- arm - 周期不一致且不反映 CPU 频率的性能计数
- r - 图例不会出现,因为我使用的是填充而不是颜色
- reactjs - “没有为 JavaScript 文件指定有效规则”是什么意思?
- sql-server - 用附加条件区分一列以选择非唯一行
- python - 通过 while_loop 的 TensorFlow 梯度
- css - Bootstrap 4当第一列有很多文本时如何将第二列推到下一行