我可以在没有 JS 的情况下使 css“内容：”可点击吗？答案

【问题标题】：Can I make css "content:" clickable without JS?我可以在没有 JS 的情况下使 css“内容：”可点击吗？
【发布时间】：2015-07-30 16:03:35
【问题描述】：

链接“CATEGORIAS”（标记为紫色）重定向到主页，“+”号打开一个下拉菜单。因此，如果用户点击链接“CATEGORIAS”将被重定向到主页。

我们希望 :after 伪元素覆盖链接，占据屏幕 100% 的宽度。因此，如果用户单击“CATEGORIAS”，它实际上是在单击 :after 元素。

http://i.imgur.com/z3QIrCU.jpg http://i.imgur.com/ORJguW0.jpg

span {
    position: absolute;
    top: 0;
    width: 100%;
    height: 30px;
    background-color: rgba(137,142,236,0.5);
}

span:after {
    font-family: "FontAwesome";
    content: "\f067";
    font-size: 26px;
    color: #7f7355;
    cursor: pointer;
    top: 3px;
}

谢谢

【问题讨论】：

您能介绍一下您的 HTML 代码吗？
我们正在编辑 PrestaShop 模板，我们无权编辑 HTML，因此只能使用 CSS。这是我们网站的链接 - telebelleza.es（该菜单仅在移动设备中显示）
为什么你希望伪元素是可点击的，而不是 span 本身？您不能使伪元素可点击。但是，您可以禁止在伪元素上发生单击事件，并使它们发生在伪元素下方的元素上。
@IgnaciodeNuevo 这非常重要，因为在我的示例中 (jsfiddle.net/r7nzbbhz) 一切正常！

标签： css pseudo-element

【解决方案1】：

你试过吗？为我工作。

.menu-mobile-grover,
.menu-mobile-grover:after {
    width: 100%;
}

【讨论】：