CSS伪元素::after的content的内容怎么通过js或jq获取当前元素的内容？

发布网友发布时间：2022-04-06 11:13

共9个回答

热心网友时间：2022-04-06 12:42

目前伪装类是不可获取的。更何况是去修改伪类的content，建议尝试用class去修改他

jquery代码
$(".cc").hover(function(){
$(this).addClass("aa");
})；

热心网友时间：2022-04-06 14:00

伪类是修改不了的，只有通过覆盖来实现；
或者把css写成这样
mask.reserve:after{
content: attr(data-content);
}
通过js或者jq来控制data-content的内容，content是可以读取到data-content；

热心网友时间：2022-04-06 15:35

jquery不支持伪元素的筛选，具体可参考https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin中的说明以及变通的办法

热心网友时间：2022-04-06 17:26

很简单啊，看代码：

console.log(window.getComputedStyle(
document.querySelector('.list-link-3'), ':after'
).getPropertyValue('content'));

热心网友时间：2022-04-06 19:34

<!doctype html>
<html>
    <head>
        <title>content test</title>
        <style type="text/css">

            p:hover::before{
                content: attr(data-attr);
                color: red;
            }
        </style>
    </head>
    <body>
        <p data-attr="content_1">content_1</p>
        <p data-attr="content_2">content_2</p>
        <p data-attr="content_3">content_3</p>
    </body>
</html>

追问明白了，原来不需要借助js或jq的，谢谢

热心网友时间：2022-04-06 21:59

其实我是不解，你既然想要加入你所说的效果，为何一定要使用:after呢？他不是不可替代的。你需要明白，:after的意思是什么。
:after 选择器在被选元素的内容后面插入内容。
请使用 content 属性来指定要插入的内容。
这样你就明白了吧，他的作用是向被选元素的后面插入内容，且内容就是content里面的内容。我不知道你是在那个元素上面添加的:after。假定，你是在div元素使用:after。可以参考，
$('div').append('<span>这里是content元素的内容</span>')向指定元素内部后面插入节点。我为何使用span？是因为span是内敛元素，如果你的content里面只是单纯的装了文字或其他内容，使用span最合适了。
关于你所问的，如何操作：after这个伪元素？
给你参考一遍文章，看完秒懂
http://blog.csdn.net/like_jack/article/details/64126577

热心网友时间：2022-04-07 00:40

像正常那样拿到伪类这个DOM估计是不大可能了，不过控制的方法也有很多，你可以参考一下。
http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-such-as-before-and-after-using-jquery
http://stackoverflow.com/questions/9798210/is-there-any-way-to-reset-after-before-css-rules-for-an-element

热心网友时间：2022-04-07 03:38

直接获取after的内容可能有些困难，可以通过简介的方式获取
例如
html：<a href="#" data-content="G"></a>
css：a:after{ content:attr(data-content); }
jqeury: $("a").attr("data-content");
这样就可以统一了

热心网友时间：2022-04-07 06:53

hover不能做吗