html - 设计边框底部

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

幸运的是，通过 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>