提问人：The logo Maker 提问时间：7/1/2023 更新时间：7/3/2023 访问量：85
如何在CSS中制作垂直文本分隔符？
How to make a vertical text divider, in CSS?
问：
在HTML CSS中，如何制作一个垂直分隔线来分隔两个部分。
：：before 和 ：： after 不起作用。任何天才的伎俩都将不胜感激。
我也尝试过边距，但它们没有那么好。也许我们可以在文本之前和文本之后尝试一个 div，并给它们最小高度和 1px 水平填充和一些 bg 颜色。这是所需的输出： 垂直文本分隔符 css
答：
0赞
The logo Maker
7/1/2023
#1
我找到了解决方案：
.flex-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.line {
min-height: 70px;
padding: 0 1px;
background-color: black;
} <div class="flex-container">
<div class="line"></div>
<p>OR</p>
<div class="line"></div>
</div>
2赞
Md. Rakibul Islam
7/1/2023
#2
它也适用于 和 伪元素。::before::after
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.flex-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.flex-container:before, .flex-container:after {
content: "";
min-height: 70px;
padding: 0 1px;
background-color: black;
}
</style>
</head>
<body>
<div class="flex-container">
<p>OR</p>
</div>
</body>
</html>
评论