如何仅用CSS实现鼠标悬停时显示行星名称？

你用::before伪元素的思路完全正确——这是纯CSS实现悬停提示最经典、最可靠的方案，完全符合你"不用JS、不添加额外HTML属性"的要求。

优化写法：用CSS自定义属性简化重复代码 #

你当前需要为每个行星单独写悬停时的content规则，其实可以通过**CSS自定义属性（变量）**来简化，避免重复的:hover::before声明：

.planet {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-size: cover;
}

/* 统一配置提示框的基础样式 */
.planet::before {
    content: var(--planet-name, ""); 
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 5px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none; 
}

.planet:hover::before {
    opacity: 1;
}

/* 为每个行星绑定名称变量 */
#earth { --planet-name: "Earth"; }
#mars { --planet-name: "Mars"; }

这种写法的好处：

• 把名称定义和提示框样式彻底分离，代码逻辑更清晰
• 新增行星时，只需要添加一行变量声明，不用重复写悬停规则
• 全程纯CSS实现，完全不依赖任何额外HTML属性或JS

为什么这是最优解？ #

因为你限制了不能用data-name这类额外HTML属性，所有行星名称只能通过CSS选择器（比如ID）关联。自定义属性的方式既保持了代码的可维护性，又没有违反你的限制，比原来逐条写#xxx:hover::before更高效。

如果要考虑兼容性，CSS自定义属性在所有现代浏览器中都有良好支持（IE除外，现在基本无需兼容），完全满足常规场景需求。

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