如何输入[attribute|="value"]中的直线及导航栏分隔直线？

你说的这种直线叫做水平分隔线（Horizontal Rule），以下是不同场景下的输入/实现方法：

1. Markdown 场景（用于标题分隔） #

在Markdown里，直接输入以下任意一种格式就能生成水平分隔线：

• 连续3个及以上的星号：***
• 连续3个及以上的减号：---
• 连续3个及以上的下划线：___

输入后渲染出来就是一条贯穿页面宽度的直线，适合分隔标题或内容区块。

2. HTML/CSS 场景（用于导航栏选项分隔） #

如果是网页导航栏里分隔Home、News这类选项，通常用HTML结合CSS实现，常见方法有两种：

方法一：使用<hr>标签（原生水平分隔线） #

直接在选项之间插入<hr>标签，再用CSS调整样式：

<nav>
  <a href="#">Home</a>
  <hr>
  <a href="#">News</a>
  <hr>
  <a href="#">About</a>
  <hr>
  <a href="#">Contact</a>
</nav>

<style>
  nav hr {
    display: inline-block; /* 让分隔线和导航选项在同一行 */
    width: 1px; /* 设置分隔线宽度 */
    height: 16px; /* 设置分隔线高度，匹配导航文字高度 */
    border: none;
    background-color: #ccc; /* 设置分隔线颜色 */
    margin: 0 8px; /* 给分隔线左右加间距 */
  }
</style>

方法二：用CSS伪元素给导航选项加边框（更推荐） #

不需要额外标签，直接通过CSS给除了第一个/最后一个的选项加左边或右边边框：

<nav>
  <a href="#">Home</a>
  <a href="#">News</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

<style>
  nav a:not(:last-child) {
    border-right: 1px solid #ccc; /* 给除最后一个外的选项加右边框作为分隔线 */
    padding-right: 12px; /* 给选项右边加内边距，避免文字贴分隔线 */
    margin-right: 12px; /* 给选项右边加外边距，加大分隔空间 */
  }
</style>

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