我想设计一个如下图所示的边框。但是我没有关于如何做到这一点的想法。
https://codepen.io/szn0007/pen/VRGPyE
div.about-me h2{
color: #000;
border-bottom: 1px solid #efefef;
width: 20%;
margin: 0 auto;
padding: 20px;
}
提前谢谢您。
答案 0 :(得分:3)
幸运的是,使用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>
答案 1 :(得分:1)
尝试一下:
<div class="about-me">
<h2>About Me</h2>
<p>*</p>
</div>
css:
div.about-me{
width: 100%;
text-align: center;
}
div.about-me h2{
color: #000;
border-bottom: 1px solid #efefef;
width: 20%;
margin: 0 auto;
padding: 20px;
}
p {
font-size: 50px;
transform: translatey(-72px);
}