Как сделать так, чтобы элемент появлялся при наведении курсора? ⇐ CSS

[Anonymous]

Итак, у меня есть текст, поверх которого я хочу, чтобы появилась ссылка. Например, вот изображение того, что я хочу видеть:

Когда я навожу курсор на выделенный текст или когда я навожу курсор на ссылку, я хочу, чтобы она появилась, но я не знаю, как это сделать. Например, я попробовал что-то подобное, но мне не удалось заставить текст при наведении гармонично сочетаться с другим текстом:

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

Espresso is coffee brewed by expressing or forcing a small amount of nearly boiling water under pressure through finely ground coffee beans. Espresso is generally thicker than coffee brewed by other methods, has a higher concentration of suspended and dissolved solids, and has crema on top (a foam with a creamy consistency). Hello As a result of the pressurized brewing process, the flavors and chemicals in a typical cup of espresso are very concentrated. Espresso is also the base for other drinks such as a caffè latte, cappuccino, caffè macchiato, caffè mocha, flat white, or caffè Americano. Espresso has more caffeine per unit volume than most coffee beverages, but because the usual serving size is much smaller, the total caffeine content is less than a mug of standard brewed coffee, contrary to a common belief.[2] Although the actual caffeine content of any coffee drink varies by size, bean origin, roast method and other factors, the caffeine content of typical servings of espresso vs. drip brew are 120 to 170 mg[3] vs. 150 to 200 mg.[4][5]

А вот CSS:

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

.span {
background-color: rgba(255, 16, 16, 0.25);
text-decoration: underline;
text-decoration-style: solid;
text-decoration-color: black;
}

.hide {
position: absolute;
display: none;
background-color: #2B2424;
color: #339CD8;
line-height: 18px;
font-size: 18px;
padding:10px;
}

.span:hover > .hide {
position: absolute;
display: block;
}

Теперь элемент появляется только при наведении на него курсора, но я хочу, чтобы пузырь всегда появлялся в одном и том же месте относительно текста. Теперь это работает, если я переключаю теги span на теги p. Но если я это сделаю, текст не будет слипаться со всем остальным текстом вокруг него. Он делает это:

Теперь я не знаю, что делать. Заранее спасибо!! (А ещё я очень ненавижу CSS)

Подробнее здесь: https://stackoverflow.com/questions/712 ... hover-text