如何在标题间添加如图所示的点状分隔符？

下面给你两种实用的实现方式，对应你要的类似“Remote”“Full-time”之间的点状分隔效果：

方法一：CSS伪元素（推荐，灵活可控） #

这种方式不需要修改HTML结构，纯靠CSS实现，后期改样式也方便。

HTML结构 #

<div class="tag-container">
  <span class="tag">Remote</span>
  <span class="tag">Full-time</span>
  <span class="tag">Entry level</span>
</div>

CSS样式 #

/* 给除了最后一个标签以外的所有标签添加分隔符 */
.tag-container .tag:not(:last-child)::after {
  content: " • "; /* 核心：点状分隔符，也可以用Unicode字符 \u2022 */
  margin: 0 10px; /* 调整分隔符和前后文本的间距 */
  color: #666; /* 设置分隔符颜色，和主文本区分开 */
}

/* 可选：给标签加基础样式，让效果更贴近示例 */
.tag {
  font-size: 14px;
  color: #333;
}

方法二：直接插入分隔符（快速简单） #

如果需求简单，也可以直接在HTML里手动插入分隔符：

<span>Remote</span> • <span>Full-time</span> • <span>Entry level</span>

补充说明 #

• 用CSS伪元素的好处：如果后续要调整分隔符样式（比如换成虚线、改变颜色），或者在移动端换行时隐藏分隔符，只需要修改CSS即可，不用动HTML结构。
• 分隔符的字符可以根据需求替换，比如用三个点 ... 或者其他Unicode符号。

内容的提问来源于stack exchange，提问作者User9123