如何在输入框底部边框末尾添加圆点？

需求说明 #

需要为input元素设置样式，在其底部边框的末尾添加一个实心圆点，呈现出底部边框延伸至末端后以圆点收尾的效果。此前尝试使用:before/:after伪元素直接作用于input，但未成功实现。

可行解决方案 #

由于input属于替换元素，部分浏览器不支持为其添加伪元素，因此可以借助父容器来模拟底部边框与圆点的组合效果，无需额外DOM节点，代码更简洁：

HTML结构

<div class="input-wrapper">
  <input type="text" placeholder="Type something...">
</div>

CSS样式

.input-wrapper {
  max-width: 352px;
  width: 100%;
  position: relative;
  margin: 10px 0;
}

.input-wrapper input {
  width: 100%;
  border: none;
  border-bottom: 1px solid red;
  padding: 0.5em 0; /* 可选：增加内边距提升输入体验 */
  box-sizing: border-box;
}

/* 生成底部边框末尾的圆点 */
.input-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 6px;
  height: 6px;
  background-color: red;
  border-radius: 50%;
  /* 让圆点与底部边框垂直居中对齐 */
  transform: translateY(50%);
}

方案细节说明 #

• 借助父容器的::after伪元素创建圆点，避开input伪元素的兼容性问题
• 通过绝对定位将圆点固定在父容器右下角，transform: translateY(50%)确保圆点与底部边框垂直居中
• 父容器设置position: relative，作为圆点绝对定位的参考坐标系
• input设置box-sizing: border-box，避免内边距导致宽度溢出

对原尝试代码的优化 #

原代码通过额外的.line和.the-dot元素实现效果，增加了不必要的DOM节点。上述方案仅通过父容器伪元素即可完成需求，结构更精简，后期维护更方便。

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