文字浮懸提示
#tooltip-007-top-left-abbr
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<style type="text/tailwindcss">
.content {
@apply max-w-sm w-full space-y-5 text-black;
}
.title {
@apply text-xl font-bold;
}
.abbr {
@apply italic font-bold underline relative;
}
.abbr:hover::after {
@apply absolute bg-red-300 rounded content-['HyperText_Markup_Language'] w-max text-white bottom-full z-10 p-4;
}
</style>
<body class="min-h-svh flex items-center justify-center">
<div class="content">
<p class="title">The mark element</p>
<p>The <span class="abbr">HTML</span>
mark element
represents text that has been
highlighted or
marked for reference or emphasis. By
default, browsers render the text with a yellow background.
<br>
<br>
We can use CSS to customize its
appearance—for example, changing the highlight color or adding rounded
corners. This element is often used to emphasize search results or important text passages.
</p>
</div>
</body>
</html>