Как показать имена планет на Hover, используя только CSS? ⇐ CSS

[Anonymous]

Я создаю солнечную систему с помощью CSS, и я хочу отобразить имя каждой планеты, когда пользователь колеблется над ней. Тем не менее, я хочу достичь этого эффекта, используя только CSS, без JavaScript или дополнительных атрибутов в HTML (например, имя данных).
Я пытался использовать :: До Чтобы отобразить имена, но мне пришлось установить свойство контента отдельно для каждой планеты. PrettyPrint-Override ">

Код: Выделить всё

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

.planet::before {
content: "";
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:hover::before { content: "Earth"; }
#mars:hover::before { content: "Mars"; }
< /code>
Какой лучший подход только для CSS для демонстрации имен планет на Hover? Использование :: перед 

правильным методом, или есть более эффективная техника?

Подробнее здесь: https://stackoverflow.com/questions/794 ... g-only-css