是否可以在我的 css 文件中执行类似的操作？：
.myclass:after{
content:"click me";
onclick:"my_function()";
}
我想在 myclass 的所有实例之后在 css 样式表中添加一个可点击的文本。
【问题讨论】：
标签： javascript html css pseudo-element
是否可以在我的 css 文件中执行类似 [参见上面的代码] 的操作？
没有
要问的重要问题是为什么。
HTML 可以控制网页中的数据。任何 CSS 或 JS 都是通过 HTML 指定的。这是模型。
CSS 可以控制 styles，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);
【讨论】：
div.field-row:last-of-type:after {} .. .then 你不必担心 jQuery 需要跟踪元素并在添加新行时不断将其移动到最后一行，特别是如果按钮必须匹配其包含行的高度而没有 JS。
【讨论】：
如果可以用 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>
还有一个代码：
<script>
function clickFunc(his, event)
{if (event.clientY>his.clientHeight){console.log("It was a click");}; }
</script>
【讨论】：
使用 jQuery 的After:
【讨论】：
:after (CSS) 在被选元素中添加伪元素，.after() (jQuery) 在被选元素之后立即添加新元素。 .append 将是正确的等价物。