css实现点击按钮提示文字

CSS中有很多实现交互效果的方法，其中一个就是利用:hover伪类和:before伪元素来实现鼠标悬停时显示提示文字。但是，有时候我们需要点击按钮才显示提示文字。那么，怎么实现呢？本文将介绍如何使用CSS实现点击按钮提示文字。

首先，我们需要在HTML中添加一个按钮。

    <button>点击我</button>

接下来，我们需要在CSS中定义按钮的样式，并利用:before伪元素添加提示文字。

    button {
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        position: relative;
    }
    button:before {
        content: "这是提示文字";
        background-color: #333;
        color: white;
        font-size: 14px;
        padding: 5px;
        border-radius: 3px;
        position: absolute;
        top: 100%; /*将伪元素定位在按钮下面*/
        left: 50%;
        transform: translateX(-50%);
        opacity: 0; /*初始时隐藏*/
        transition: opacity 0.2s ease-in-out; /*添加过渡效果*/
    }
    button:active:before {
        opacity: 1; /*当按钮被点击时显示提示文字*/
    }

在样式中，我们首先将按钮的position属性设置为relative，以便让:before伪元素相对于按钮定位。然后，将其top属性设置为100%，将伪元素定位在按钮的下面。再利用left和transform属性将其水平居中。接下来，我们将其opacity属性初始值设为0，让其一开始隐藏。最后，在按钮被点击时，将:before伪元素的opacity属性值改为1，实现提示文字的显示。

以上就是使用CSS实现点击按钮提示文字的方法。你可以根据自己的需求，改变按钮和提示文字的样式和内容。