要通过CSS实现点击<span>标签后的高亮显示，你可以使用:active伪类或结合JavaScript来实现。以下是两种方法的示例：
:active伪类:active伪类可以在用户点击元素时应用样式。这种方法适用于简单的点击效果，但效果只在用户点击时保持。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highlight Span on Click</title>
<style>
.highlight:active {
background-color: yellow;
color: black;
}
</style>
</head>
<body>
<span class="highlight">点击我</span>
</body>
</html>
在这个例子中，当用户点击<span>元素时，背景颜色会变为黄色，文字颜色变为黑色。
如果你希望点击后的高亮效果在点击后保持，可以使用JavaScript来切换一个CSS类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highlight Span on Click</title>
<style>
.highlight {
background-color: yellow;
color: black;
}
</style>
</head>
<body>
<span id="highlightSpan">点击我</span>
<script>
document.getElementById('highlightSpan').addEventListener('click', function() {
this.classList.toggle('highlight');
});
</script>
</body>
</html>
在这个例子中，当用户点击<span>元素时，JavaScript会切换highlight类，从而改变元素的样式。点击后，高亮效果会保持，直到再次点击取消。
:focus伪类（适用于可聚焦元素）如果<span>元素可以被聚焦（例如通过添加tabindex属性），你可以使用:focus伪类来实现点击后的高亮效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highlight Span on Click</title>
<style>
.highlight:focus {
background-color: yellow;
color: black;
outline: none; /* 移除默认的焦点轮廓 */
}
</style>
</head>
<body>
<span class="highlight" tabindex="0">点击我</span>
</body>
</html>
在这个例子中，<span>元素通过tabindex="0"变得可聚焦，点击后:focus伪类会应用高亮样式。
:active伪类：适用于简单的点击效果，效果只在点击时保持。:focus伪类：适用于可聚焦的元素，点击后保持高亮效果。根据你的需求选择合适的方法。