html：

<div class="pseudo-class">偽類元素</div>

css：

在元素前面加 |使用::before

.pseudo-class {font-size: 24px;font-family: Helvetica Neue;font-weight: 400;color: rgba(238, 50, 54, 1);display: flex;align-items: center;justify-content: flex-start;}.pseudo-class::before {content: "|";color: rgba(49, 48, 44, 0.6);display: inline-block;margin: 0 10px;vertical-align: 10px;}

效果圖：

?

在元素后面加 | 使用::after

.pseudo-class {font-size: 24px;font-family: Helvetica Neue;font-weight: 400;color: rgba(238, 50, 54, 1);display: flex;align-items: center;justify-content: flex-start;}.pseudo-class::after {content: "|";color: rgba(238, 50, 54, 1);display: inline-block;margin: 0 10px;}

效果圖：

?

?

總結

以上是生活随笔為你收集整理的使用伪类（before，after）给元素添加分割线（|）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。