css实现点击文字显示背景颜色

CSS是网页设计中不可或缺的一部分，而在CSS中实现点击文字显示背景颜色的效果也是常见的一种需求。下面我们将介绍一种实现点击文字显示背景颜色的CSS代码。

 span {
   display: inline-block;
   padding: 5px;
   background-color: #ccc;
   cursor: pointer;
 }
 
 span:hover {
   background-color: #999;
 }

上面的代码中，我们使用了标签，并将其设置为inline-block元素，以适应不同的文本长度。接着，我们为标签添加了padding属性，以增加点击区域的大小。我们还为该标签设置了初始颜色为#ccc，并设置了光标样式为手型。

接下来，我们通过:hover伪类来实现鼠标移动到标签上时的效果。在:hover伪类中，我们将该标签的背景颜色设置为#999，以增强视觉效果。

通过上述代码的实现，当用户单击标签时，其背景颜色会发生变化，以增加点击反馈。这种效果通常用于制作互动性更强的按钮和链接等网页元素中。