设计边框底

时间:2019-03-19 19:57:32

标签: html css

我想设计一个如下图所示的边框。但是我没有关于如何做到这一点的想法。 enter image description here

https://codepen.io/szn0007/pen/VRGPyE

div.about-me h2{
  color: #000;
  border-bottom: 1px solid #efefef;
  width: 20%;
  margin: 0 auto;
  padding: 20px;
}

提前谢谢您。

2 个答案:

答案 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);

         }