如何在HTML中仅从右侧缩短Horizontal Rule的长度

默认情况下，<hr>元素是块级元素，设置宽度后会自动居中（因为默认margin: 0 auto），所以会出现两侧同时缩短的情况。要实现仅右侧缩短，核心是让水平线左对齐，只调整右侧的空白区域。

方案1：直接设置宽度与左对齐 #

修改hr的宽度，并取消默认的自动左外边距，强制元素左对齐：

hr {
  width: 75%; /* 根据需求设置具体宽度，比如75%容器宽度 */
  margin-left: 0;
  margin-right: auto;
}

这个方案会直接改变元素的实际宽度，左边缘贴合容器左侧，右侧留出空白。

方案2：基于原长度从右侧缩短（不改变占位） #

如果需要保持元素的原始占位宽度，仅视觉上从右侧缩短，可以用transform配合缩放原点：

hr {
  transform: scaleX(0.8); /* 横向缩放到原长度的80% */
  transform-origin: left center; /* 以左侧中点为缩放原点，只缩短右侧 */
}

这种方式适合需要微调长度，但不想影响页面布局的场景。

方案3：用自定义元素模拟水平线 #

如果原生hr的样式限制较多，也可以用div模拟水平线，更灵活控制：

.custom-hr {
  height: 0;
  border-top: 1px solid #999; /* 自定义线条颜色和粗细 */
  width: 80%;
  margin-left: 0;
}

使用时替换<hr>为<div class="custom-hr"></div>即可。

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