gpt4 book ai didi

css - hr类双边框

转载 作者:行者123 更新时间:2023-11-28 16:06:02 24 4
gpt4 key购买 nike

我请求你帮助处理 .css hr

我想弄清楚如何制作这样的双边框:

Sample

这是我做的:

hr.style15 {
border-top: 4px double black;
}
hr.style15:after {
content: 'SHIPPING INFO';
display: inline-block;
position: relative;
top: -15px;
left: 40px;
padding: 0 10px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
}

我的问题是:

1) 如何去除两行下方的 inline-block?我尝试删除 inline-block 句子,但它不起作用。

2) 我可以添加 font-family 和字体大小吗?

3) 是否可以在不增加宽度的情况下增加两行之间的间距?

最佳答案

基本上我相信我会做不同的事情。在行中同时使用 :after 和 :before 将极大地帮助您在行上放置文本。

所以我为你准备了这个CodePen。基本上我所做的是使用 :after 和 :before (正如我之前告诉你的那样)作为边界线,然后我在边界线的顶部添加了一个带有背景颜色(在本例中为白色)的跨度(查看 z-index)。

.container {
width: 800px;
position: relative;
}

.double-bar {
&:after {
content: "";
border-bottom: 1px solid black;
width: 100%;
position: absolute;
top: 9px;
left: 0;
z-index: 1;
}

&:before {
content: "";
border-bottom: 1px solid black;
width: 100%;
position: absolute;
top: 13px;
left: 0;
z-index: 1;
}

span {
z-index: 2;
position: relative;
background-color: white;
left: 40px;
padding: 0 7.5px;
text-transform: uppercase;
font-weight: 600;
font-size: 20px;
}
}

你可以看到一个demo

希望对您有所帮助!

关于css - hr类双边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39219553/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com