如何用 CSS 实现红框中文字两边中间线条的效果？

通过 实现红框中效果

问题：如何使用 css 实现红框中文字两边中间线条的效果？

回答：您可以使用以下 css 代码实现此效果：

.text {
    display: flex;
    align-items: center;
    justify-content: center;
}
.text::before {
    content: "";
    flex: 1;
    background-color: red;
    height: 1px;
    margin-right: 10px;
}
.text::after {
    content: "";
    flex: 1;
    background-color: red;
    height: 1px;
    margin-left: 10px;
}

登录后复制

将此 css 应用到一个包含您要添加效果的文本的 html 元素上：

立即学习“”；

<div class="text">一段文字</div>

登录后复制

这样，文本两侧就会出现您所需的红色线条。

以上就是如何用 CSS 实现红框中文字两边中间线条的效果？的详细内容，更多请关注米云其它相关文章！