Javascript 在之后添加带有css伪元素的onclick

在我的css文件中是否可以执行类似操作

.myclass:after{
   content:"click me";
   onclick:"my_function()";
 }

我想在css样式表中的

myclass

的所有实例之后添加一个可单击的文本

在我的css文件中是否可以执行类似[参见上面的代码]的操作

没有

要问的重要问题是为什么

HTML控制网页中的数据。任何CSS或JS都是通过HTML指定的。这是型号

CSS可以控制样式，CSS和HTML或JavaScript之间没有链接。这是视图

JavaScript可以控制网页中的交互，并且可以钩住任何和所有DOM节点。这是控制器

由于这种MVC结构：HTML属于

.HTML

文件，CSS属于

.CSS

文件，JS属于

.JS

文件

CSS伪元素不会创建DOM节点。JavaScript无法直接访问CSS中定义的伪元素，也无法将事件附加到所述伪元素

如果您已经有了一个设置好的结构，并且无法添加在HTML中生成新链接所需的额外内容，JavaScript可以动态添加所需的新元素，然后可以通过CSS设置样式

jQuery使这一点非常简单：

$('<span class="click-me">click me</span>').appendTo('.myclass').click(my_function);

$（'click me'）。附加到（'.myclass'）。单击（my_函数）；

嗯

实际上，只有internet explorer才可以使用它

否则：

不。一点也不，这不是css的制作和用途。

使用jQuery的：

---

如果可以使用jQuery完成某些事情，那么可以肯定的是，不使用jQuery也可以完成。让我们来看一个数据模型：

<div id="container">
<div id="hasblock" onclick='clickFunc(this, event)'></div>
</div>

我们需要一些样式表：

<style>
div#container { width:100px; height:50px;position relative; border:none;}
div#hasblock {width:100px; height:50px;position absolute;border:solid black;}
div#hasblock::after {content:"Click me"; position: absolute; border:solid red;
top:80px;left:0px;display:block;width:100px;height:20px; font-size:18px;}
</style>

div#容器{宽度：100px；高度：50px；相对位置；边框：无；}
div#hasblock{宽度：100px；高度：50px；绝对位置；边框：纯黑色；}
div#hasblock:：在{内容：“单击我”之后；位置：绝对；边框：纯红色；
顶部：80px；左侧：0px；显示：块；宽度：100px；高度：20px；字体大小：18px；}

和一个代码：

<script>
function clickFunc(his, event)
{if (event.clientY>his.clientHeight){console.log("It was a click");};    }
</script>

函数clickFunc（his、事件）
{if（event.clientY>his.clientHeight）{console.log（“这是一次点击”）；}；}

如果不可能，那就是我一直在寻找的答案。我知道如何使用jQuery实现这一点。请检查以下答案：

：在所选元素中添加伪元素之后，
。after（）
（jQuery）在所选元素之后立即添加新元素
.append
将是正确的等价物。我的朋友，你真的是一个艺术家。如果可以在伪元素上单击事件，那么当你需要一个只在最后一个元素中显示的按钮时，它将非常方便。在具有字段/字段集的可克隆行的表单中，绝对位置的伪[+]按钮（右对齐并匹配行的高度）可能出现在最后一行中，而不是在它的后面/下面：
div.field-row:last of type:after{}
…这样，您就不必担心jQuery需要跟踪元素，并在添加新行时不断将其移动到最后一行，特别是当按钮必须匹配其包含行的高度而没有JS时。