使用伪类（before，after）给元素添加分割线（|）
生活随笔
收集整理的这篇文章主要介绍了
使用伪类（before，after）给元素添加分割线（|）
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
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）给元素添加分割线（|）的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： vue中回车键登录
- 下一篇： n的阶乘c语言输出为负数,为什么 n 为