使用CSS伪元素:after导致JSP页面表单无法点击问题排查

问题出在你给.container添加的:after伪元素上：

• 伪元素使用了position: fixed，并且通过top: -40px; left: -25px; right: -25px; bottom: -25px;设置了超大覆盖范围，完全包裹了整个表单容器。
• 伪元素默认处于父元素的上层，相当于在所有表单可点击元素上方盖了一层“透明遮罩”，导致点击事件无法穿透到表单元素，所以表单看起来像是冻结了。

修复方案一：让伪元素不拦截鼠标事件 #

给伪元素添加pointer-events: none属性，这个属性会让伪元素忽略所有鼠标交互，点击会直接穿透到下层的表单元素。修改后的CSS代码如下：

.container:after {
  position: fixed;
  content : '\00a0  \00a0 \00a0 Login to external function';
  font-size: 1.3em;
  font-weight: bold;
  border-radius: 25px;
  padding-top:15px;
  top: -40px;
  left: -25px;
  right: -25px;
  bottom: -25px;
  border: black 2px solid;
  border-spacing: 10px;
  pointer-events: none; /* 添加此行 */
}

修复方案二：改用更直观的结构替代伪元素 #

如果考虑老旧浏览器兼容性，不想依赖pointer-events，可以直接给.container添加边框，并用独立元素放置标题，避免伪元素的覆盖问题：

1. 修改.container的CSS，添加边框并预留标题空间：

.container {
  background-color: #f2f2f2;
  padding: 20px;
  position:absolute;
  width: 400px;
  min-height: 300px;  
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -250px);
  border: black 2px solid;
  border-radius: 25px;
  padding-top: 55px; /* 给标题留出空间 */
}

2. 在JSP页面的.container内部添加标题元素：

<div class="container">
  <div class="form-header">Login to external function</div>
  <!-- 原有的表单输入框、按钮等内容 -->
</div>

3. 给标题添加样式：

.form-header {
  font-size: 1.3em;
  font-weight: bold;
  position: absolute;
  top: 15px;
  left: 50px; /* 对应原伪元素的空格缩进 */
}

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