如何制作标题装饰

Question

我正在尝试在标题下重新创建装饰线。反正我是否可以使用HTML和CSS来做到这一点？做有类似事情的人有没有经验？

我想过做这样的事情：

<p>&mdash;&mdash;&mdash;&#8226;&mdash;&mdash;&mdash;</p>

不幸的是结果并不像预期的那样。

Answer 1

我会使用行的下边框，然后使用点的伪元素。

点使用use border-radius使元素成为球形。然后我们使用background-color将其设置为白色并将边框颜色设置为与背景相同的颜色，这样我们就可以屏蔽掉底部边框的部分。

body {
  background-color: salmon;
}

h2 {
  margin: 1rem 0 0.5rem;
  padding-bottom: 0.5rem;
  font: 2rem/1.25 Arial, sans-serif;
  color: white;
  border-bottom: 1px solid white;
  text-align: center;
  position: relative;
}

h2::after {
  content: '';
  position: absolute;
  z-index: 5;
  transform: translateX( -50% );
  bottom: -13px; /* border thickness + half height */
  left: 50%;
  width: 6px;
  height: 6px;
  background-color: white;
  border: 10px solid salmon;
  border-radius: 50%;
}

<h2>Portfolio</h2>

这种方法的一个警告是，您需要在点和上面的文本之间留出足够的空间，否则，用于遮盖底部边框的点的边框粗细将覆盖/掩盖您的文本。见下面的例子：

body {
  background-color: salmon;
}

h2 {
  margin: 1rem 0 0.5rem;
  padding-bottom: 0.5rem;
  font: 2rem/1.25 Arial, sans-serif;
  color: white;
  border-bottom: 1px solid white;
  text-align: center;
  position: relative;
}

h2::after {
  content: '';
  position: absolute;
  z-index: 5;
  transform: translateX( -50% );
  bottom: -23px; /* border thickness + half height */
  left: 50%;
  width: 6px;
  height: 6px;
  background-color: white;
  border: 20px solid gold;
  border-radius: 50%;
}

<h2>Portfolio</h2>

您也可以执行类似的操作，但将伪元素的内容设为项目•。