js修改css伪元素after：实现悬浮、弹出菜单或其他交互效果？

js能获取,修改伪类元素:before或:after吗?

1、在CSS中，伪类元素：before和：after的使用为网页设计带来了无限可能。然而，直接通过JavaScript获取或修改这两个伪类元素的内容却并非易事。许多开发者可能已经熟悉使用Window.getComputedStyle（）方法获取元素的CSS样式，但这方法无法直接修改伪元素的内容。

2、js 效果 其实，after和before可以添加的不仅仅是像上面这种字符串，以下是可以添加的常用的内容 具体的请参考这篇文章 vuecss伪元素after的使用开篇一句话：CSS的伪类，伪元素就当成vue的过滤器使用就好了，我也是想到这个突然就茅塞顿开了。用法：after选择器表示向选定的元素之后插入内容。

3、用js控制css伪类after：只能通过添加样式，然后通过这个样式的伪类来控制吧。没法直接改。

4、css用content属性配合：after或者：before伪类理论上是可以做到的，不过比较麻烦，而且会有浏览器兼容的问题。推荐用js的方法来实现，具体的步骤可以参照参考资料里面的做法。

5、beforeafter是Css3的写法，所以css2的要比css3的兼容好，beforeafter的兼容性要比beforeafter好。在H5开发中建议使用beforeafter比较好，注意伪对象要配合content属性一起使用，伪对象不会出现在DOM中，所以不能通过js来操作，仅仅是在CSS渲染层加入，伪对象的特效通常要使用hover伪类样式来激活。

6、a：before { }2个冒号是伪元素，其实和1个冒号的效果是一样的，只是为了语义上更清晰明了，所以用了2冒号。1个冒号代表的是伪类。2个冒号代表的是伪元素。伪类在html文档中看不到，也不会显示，如：hover，：disabled。伪元素在html文档中看的到，也会显示，但是无法用js进行操作。

下拉菜单代码用CSS实现下拉菜单

1、创建空白页，建立HTML基础结构。写入CSS样式。我们先重置样式，保障测试内容在浏览器方便查看。使用flex布局时经常会遇到元素个数不够导致最后一行错位的问题。如果使用创建伪元素的方式解决可能又会遇到其他问题，特别是当justify-content设置为space-evenly时。

2、下面是CSS代码示例：.parent-menu { position： relative； } .sub-menu { display： none； } .parent-menu：hover .sub-menu { display： block； } 这段CSS代码利用了：hover伪类，当鼠标悬停在父级菜单上时，子菜单会显示出来。这样就能实现下拉菜单的效果。

3、新建一个html文件，命名为test.html ，用于介绍如何用css改变下拉框lect样式。2，在test.html页面，使用div创建一个模块，设置其class属性为lect1，用于下面对该类名进行样式布局。3，在div模块内，使用lect标签创建一个下拉选择框，下拉列表是三个颜色的选择。

4、首先，我们需要创建HTML的基础结构。对于下拉菜单，通常使用``和``标签来定义选项。例如：html 选项1 选项2 选项3 这里的`id`属性对于后续CSS样式化很重要。 CSS样式化 接下来，通过CSS对下拉菜单进行样式化。你可以设置下拉菜单的整体样式，以及下拉菜单选项的样式。