不可以。
首先伪元素（pseudo-element）应该是CSS相关的概念。
现有的浏览器纯和辩支持或尚未支持的伪元素如下：
::after
::before
::first-letter
::first-line
::selection
::backdrop
::placeholder
::marker
::spelling-error
::grammar-error
在CSS中控制伪元素使用 selector::pseudo-element，比如给div添加 ::after
div::after {
content : 'x'
font-size : 14px
color : red
}
所以你通过JS生成的做缺HTML，在CSS中定义就棚陵好。
一、发现该问题的原因-是在写账号登录页面时，input表单添加了背景图绝州片，当自动填充，搓搓的一坨淡黄色背景出来。 这个原因是我草率的直接设置在input元素里面，结果问题就来了。所以如果把这个图标放在input表单外面，就不会出现这氏宏差个问题。 二、表单自动填充会添加浏览器默认样式怎么处理和避免 第二张图，就是表单自动填充后，chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: rgb(250, 255, 189)/* #FAFFBD*/ background-image: none color: rgb(0, 0, 0) } 看到这里添加上这段代码，我会想到使用样式覆盖的方法解决。我完全可以使用!important去提升优先级。但是有个问题，加歼皮！important不能覆盖原有的背景、字体颜色，除了chrome默认定义background-color,background-images,color不能使用 !important提升优先级，其他属性均可使用它来提升优先级。 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: #FFFFFF background-image: none color: #333 /* -webkit-text-fill-color: red//这个私有属性是有效的 */ } input:-webkit-autofill:hover { /* style code */ } input:-webkit-autofill:focus { /* style code */ }思路有两个，1、通过打补丁，修复bug。2、关闭浏览器自带填充表单功能 情景一：input文本框是纯色背景的 解决办法： input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset -webkit-text-fill-color: #333 } 情景二：input文本框是使用图片背景的 解决办法： if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { var _interval = window.setInterval(function () { var autofills = $('input:-webkit-autofill') if (autofills.length >0) {window.clearInterval(_interval)// 停止轮询autofills.each(function() {var clone = $(this).clone(true, true) $(this).after(clone).remove() }) } }, 20) }先判断是否是chrome，如果是，则遍历input:-webkit-autofill元素，再通过取值，附加，移除等 *** 作来实现。 这个方法！！ 所以最后我是不使用图标作为input表单的背景图片，而是多写一个标签，把图标拿到表单外面来。 思路二： 关闭浏览器自带填充表单功能 设置表单属性 autocomplete="off/on" 关闭自动填充表单，自己实现记住密码 <!-- 对整个表单设置 --> <form autocomplete="off" method=".." action=".."> <!-- 或对单一元素设置 --> <input type="text" name="textboxname" autocomplete="off"> 如图：未自动填充前，此时这个邮箱的小图标是inpu表单的背景图片 如图：填充后，邮箱小图标被浏览器默认样式覆盖掉 最后， 如果不想多去处理chrome浏览器下表单自动填充出现的添加默认样式，那就把这个小小的图标放到表单外面吧，我这个因为是input框 只有border-bottom，如果这个input框有边框，那么可能需要使用一个div的边框的来假装成input框的边框，然后input框弄成是没有边框的。 像这样的input框 通过以上方法成功帮朋友解决浏览器自动添加默认样式问题，小伙伴们可以放心参考此文。在的vue前端开发中，遇到了一些问题，有一个是关于伪元素的使用的，关于伪元素，之前都没有听说过，这次遇到了，查了弊烂一些资料，大概了解了一些基础用法，现在来做个记录
伪元素顾名思义伪装成元素，但不是元素，这与生成内容相关。生成内容主要指由浏览器创建的内容，而不是槐郑由标志或内容来表示。生成内容主要由:before和:after伪元素来实现，当然伪元素还包括:first-line,:first-letter和::selection
CSS伪元素是用来添加一些选择器的特殊效果。
ps：”first-line” 伪元素只能用于块级元素。
ps： 下面的属性可应用于 “first-line” 伪元素：
-font properties
-color properties
-background properties
-word-spacing
-letter-spacing
-text-decoration
-vertical-align
-text-transform
-line-height
-clear
ps： “first-letter” 伪元素只能用于块级元素。
ps： 下面的属性可应用于 “first-letter” 伪元素：
-font properties
-color properties
-background properties
-margin properties
-padding properties
-border properties
-text-decoration
-vertical-align (only if “float” is “none”)
-text-transform
-line-height
-float
-clear
需要注意的是，伪元素的使用，不需要在<body>里写铅卜颂，只需要在style里注明就好，content是必须要写的内容
这两张是我这次用来给一个字段添加中划线写的伪元素
附带一个链接 伪元素使用详解（超详细版） - 江南北 - CSDN博客
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）