html - 在特定文本旁边居中的短水平线的 HTML 代码

Question

我正在寻找 HTML 代码来创建一条短的水平线，以内联文本（以特定字体）为中心，就像图像一样。

目前，我拥有的代码是：

<span style="font-family:'Taner Ardali Antikor Mono Medium';">MY MISSION</span>

注意：我在我的 Squarespace 网站上将此代码用于文本标记或代码块。我不熟悉编码，所以不确定这是否会有所不同。

Answer 1

您可以:after为此使用选择器

.title {
  font-family:'Taner Ardali Antikor Mono Medium';
  font-size: 30px;
  display: block;
}
.title:after {
  content:"";
  display: inline-block;
  height: 2px;
  width: 100px;
  margin-left: 10px;
  background: #111;
  vertical-align: super;
}

<span class="title">MY MISSION</span>

或者可以像这样更改 HTML 使用标题标签：

.title {
  font-family:'Taner Ardali Antikor Mono Medium';
  font-size: 30px;
  display: block;
  position: relative;
}
.title span {
   background: #fff;
       position: relative;
    z-index: 1;
    padding-right: 20px;
}
.title:after {
  content:"";
  display: inline-block;
  height: 2px;
  width: 100%;
  margin-left: 10px;
  background: #111;
  position: absolute;
  left: 0;
  top: 15px;
}

<h2 class="title"><span>MY MISSION</span></h2>