如何使标签元素上的css：after /：before内容可点击[重复]答案

【问题标题】：how to make css :after / :before content clickable on a label element [duplicate]如何使标签元素上的css：after /：before内容可点击[重复]
【发布时间】：2012-02-25 21:35:31
【问题描述】：

您好，我有这个 html 代码：

<input type="checkbox" id="button2">
<label for="button2">something here</label>

所以我的想法是当我点击标签时，复选框将被激活。现在如果我添加这个 css

label:before{
  content:'some content';
...
}

当然我知道没有理由通过 css 添加它，而只是一个简化的示例，以帮助我解释自己。

现在我希望能够单击生成的“一些内容”将 css 生成，并且我希望它具有与标签相同的效果。因此，当我单击“某些内容”时，复选框将被激活。可以吗

谢谢

【问题讨论】：

我建议使用 Javascript，我认为这有点可能，但它肯定不会与浏览器兼容。
@DylanCross 我同意，但这不适用于任何重要的网站——我只是想了解一下（一种个人教程）

标签： css

【解决方案1】：

这在所有浏览器（Fx、IE、Opera）中都有效，Chrome 和 Safari 除外。这显然是 WebKit 特有的错误。

但可以通过为LABEL 指定display: inline-block 或display: block（取决于您的具体情况更合适）来解决该错误。

【讨论】：

【解决方案2】：

要解决这个问题，您可以尝试将标签内容放在标签内的 span 中，并将:before 样式应用于 span。这样:before 添加的内容仍然会在标签内。

<input type="checkbox" id="button2">
<label for="button2"><span>something here</span></label>


label>span:before{
  content:'some content';
  ...
}

不理想，因为它添加了额外的标记，但它应该可以为您解决问题。

希望对您有所帮助。

【讨论】：

呜呼！我已经在标签中有一个元素。效果很好！