首次使用CSS &::before、&::after遇故障，计算器开发求助

你的代码用的是Sass（SCSS）的嵌套语法，如果直接在原生CSS环境里运行，浏览器根本不认识&这个父选择器占位符，这是核心问题。另外代码里还有几处语法和逻辑冲突，下面逐一解决：

1. 关于&::before/&::after的基础问题 #

&是Sass特有的语法，用来指代父选择器。如果你没配置Sass预编译环境，直接把这段代码丢进原生CSS文件里，浏览器会把&当成无效选择器，伪元素自然不会生效。

修复方式： #

• 如果你要用原生CSS：把&替换成实际的元素选择器（比如你的计算器按钮类名是.calc-btn）：

.calc-btn::before,
.calc-btn::after {
  content: "";
  display: table;
}

.calc-btn::after {
  clear: both;
}

• 如果你要保留Sass语法：确保你的项目已经配置了Sass编译工具（比如Node-sass、Dart Sass），把.scss文件编译成.css后再引入页面。

2. 第二块代码里的错误与修复 #

你标注的冒号错误其实不是核心问题，真正的问题有这些：

• 重复的content属性：伪元素里写了两次content，后面的content: attr(data-num)会完全覆盖前面的content: " "，保留后者即可。
• display: table与position: absolute冲突：设置position: absolute后，元素的display会被强制改为block（除非手动指定），display: table完全没用，直接删掉。
• 动画无效果：你用了animation: zoom 1s，但没定义zoom关键帧，浏览器不知道动画要做什么。
• 定位脱离父元素：伪元素用position: absolute时，父元素（也就是按钮）必须设置position: relative，不然伪元素会相对于整个文档定位，不是按钮本身。

修正后的代码（Sass版本）： #

.calc-btn:hover {
  background: #201e40;
}

.calc-btn:focus {
  outline: 0;
  position: relative; /* 新增：让伪元素相对于按钮定位 */

  &::after {
    content: attr(data-num); /* 只保留这个content */
    animation: zoom 1s;
    animation-iteration-count: 1;
    animation-fill-mode: both; 
    cursor: default;
    font-size: 100px;
    position: absolute;
    top: 1.5em;
    left: 50%;
    text-align: center;
    margin-left: -24px;
    opacity: 0;
    width: 48px;    
  }
}

/* 新增：定义zoom动画关键帧 */
@keyframes zoom {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

原生CSS版本： #

.calc-btn:hover {
  background: #201e40;
}

.calc-btn:focus {
  outline: 0;
  position: relative;
}

.calc-btn:focus::after {
  content: attr(data-num);
  animation: zoom 1s;
  animation-iteration-count: 1;
  animation-fill-mode: both; 
  cursor: default;
  font-size: 100px;
  position: absolute;
  top: 1.5em;
  left: 50%;
  text-align: center;
  margin-left: -24px;
  opacity: 0;
  width: 48px;    
}

@keyframes zoom {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

最后检查点 #

• 确认你的HTML元素上已经添加了对应的类名（比如class="calc-btn"），并且data-num属性有值（比如<button class="calc-btn" data-num="5">5</button>）。
• 如果用Sass，务必确保编译流程正常，没有编译错误。

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