要使用纯CSS创建一个非常简单的提示效果,你可以使用伪元素(::before或::after)来添加提示内容,并使用CSS样式来定义提示的外观。以下是一个示例:

HTML结构:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>纯CSS提示效果</title>
</head>
<body>
    <div class="tooltip">
        Hover me
    </div>
</body>
</html>

CSS样式(styles.css):

.tooltip {
    position: relative;
    display: inlineblock;
    cursor: pointer;
}

.tooltip::before {
    content: "这是一个提示";
    position: absolute;
    backgroundcolor: #333;
    color: #fff;
    padding: 5px;
    borderradius: 5px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    bottom: 100%;
    left: 50%;
    transform: translateX(50%);
}

.tooltip:hover::before {
    opacity: 1;
    visibility: visible;
}

在这个示例中,我们使用了一个具有类名 "tooltip" 的 div 元素,并为其添加了一个伪元素 ::before。当鼠标悬停在该元素上时,提示文本将显示在元素的底部。你可以根据需要调整样式和提示文本的内容。这只是一个非常基本的示例,你可以根据自己的需求进行进一步定制。