css实现没字符也显示下划线

要在CSS中实现即使文本为空，仍然显示下划线的效果，你可以利用伪元素`:before`或`:after`。例如，你可以创建一个空的span标签，并设置其伪元素的内容为一个隐藏的字符（如空格），然后添加下划线样式。下面是一个简单的示例：

<style>
  .underline-on-blank {
    position: relative;
  }
  
  .underline-on-blank::before {
    content: '\00a0'; /* 使用空格字符 */
    display: inline-block; /* 确保内容可见并占据空间 */
    width: 1px; /* 下划线宽度 */
    height: 1em; /* 下划线高度，可根据需要调整 */
    background-color: #ccc; /* 下划线颜色 */
    transform: translateX(50%); /* 将下划线居中 */
  }
</style>

<span class="underline-on-blank"> </span>

在这个例子中，即使文本框里面没有任何文字，下划线也会显示出来。