CSS伪元素::before在Font Awesome图标元素上不生效的问题排查

原始HTML结构 #

<div class="newsTimePeriod item-One">
        <h3>News</h3>
        <i class="fas fa-car"></i>       
    <div class="aboutItem">
        <p>Fire is the rapid oxidation of a material
            in the exothermic chemical process of combustion,
            releasing heat, light, and various reaction products.
        </p>
    </div>
</div>

<div class="newsTimePeriod item-Two">
        <h3>Old News</h3> 
        <i class="fas fa-car"></i>
    <div class="aboutItem">
        <p>Water is an inorganic with the chemical formula H₂O.
            It is a transparent, tasteless, odorless, and nearly
            colorless chemical substance.
        </p>
    </div>
</div>

原始CSS代码 #

.newsTimePeriod {
    display: flex;
    position: relative;
    overflow: hidden;
    padding: 0px 7px 0px 7px;
}

.newsTimePeriod h3{
    width: 100px;
    float: left;
    display: flex;
}

.fa-car, .aboutItem{
    margin: 18px 0px 0px 18px;
}

.fa-car {
    border-radius: 13px;
    height: 29px;
    width: 29px;
    color: #fff;
    background-color: #001277;
    padding: 5px;
    box-sizing: border-box;
    margin-top: 12px;
}

.aboutItem {
    padding: 14px 14px 14px 14px;
    max-width: 570px;
    background: #FFFFFF;
    border: 1px solid #DBDADA;
    color: #000;
}
/* To display vertical line*/
.fa-car::before {
    content: '';
     position: absolute;
     height: calc(100% + 28px);
     width: 3px;
     background: #33004e;
     margin-top: 30px;
     margin-left: 6px;
    
}
/* To hide vertical line on the last icon*/
.newsTimePeriod:last-child .fa-car::before {
    display: none;
}

@media (max-width: 768px) {
    .newsTimePeriod {
        flex-direction: column;
    }
    .newsTimePeriod .aboutItem {
        width: 70%;
        align-self: end;
        margin: auto;
    }
    .newsTimePeriod h3  {
        flex-direction: row-reverse;
        padding: 0 0 0 22px;
    }
}

问题核心原因 #

你用.fa-car::before实现垂直线，但Font Awesome图标本身就是依靠::before伪元素渲染的。你的自定义样式会被Font Awesome自带的::before样式直接覆盖，导致垂直线无法显示。这也是为什么给图标套div后样式能生效——div的::before不会和FA的样式冲突。

解决办法 #

改用::after伪元素来做垂直线，同时调整定位逻辑（用top/left替代margin，基于父元素newsTimePeriod的相对定位）：

修改后的垂直线相关CSS：

/* 用::after替代::before实现垂直线 */
.fa-car::after {
    content: '';
    position: absolute;
    /* 从图标底部向下延伸，数值根据现有布局计算 */
    top: 41px; /* 图标margin-top(12px) + 图标高度(29px) */
    left: 116.5px; /* h3宽度(100px) + 图标margin-left(18px) - 线宽的一半(1.5px)，保证线居中 */
    height: calc(100% + 28px);
    width: 3px;
    background: #33004e;
    z-index: -1; /* 把线放到图标和内容后方，避免遮挡 */
}

/* 隐藏最后一个元素的垂直线 */
.newsTimePeriod:last-child .fa-car::after {
    display: none;
}

额外建议：移除.newsTimePeriod的overflow: hidden属性，避免垂直线被容器截断；如果响应式布局下线的位置偏移，可在媒体查询中单独调整::after的left值。

内容的提问来源于stack exchange，提问作者user22260995