设计边框底部

Question

我想设计一个如下图所示的边框。但我对如何做到这一点的想法已经不多了。

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

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

先感谢您。

Answer 1

幸运的是，你可以在每个容器上访问两个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>

Answer 2

试试这个：

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

         }