我想设计一个如下图所示的边框。但是我已经没有关于如何去做的想法了。
https://codepen.io/szn0007/pen/VRGPyE
div.about-me h2{
color: #000;
border-bottom: 1px solid #efefef;
width: 20%;
margin: 0 auto;
padding: 20px;
}
提前致谢。
最佳答案
幸运的是,通过 CSS,您可以访问两个 pseudo elements在每个容器上。我将 Asterix 添加到一个伪元素 :after
并将该行添加到另一个 :before
。
例如:
.fancy-underline {
position: relative;
display: inline-block;
}
.fancy-underline:before {
content: '';
position: absolute;
top: calc(100% + 10px);
left: 0;
width: 100%;
height: 1px;
background: grey;
}
.fancy-underline:after {
content: '*';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: #fff;
}
<h2 class="fancy-underline">About Me</h2>
关于html - 设计边框底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55249079/