可以给用JS生成的HTML元素添加伪元素么

可以给用JS生成的HTML元素添加伪元素么,第1张

不可以。

首先伪元素(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中定义就好。

在的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博客

CSS3给伪元素before添加hover *** 作:

1、伪元素的由两个冒号“::”开头,然后是伪元素的名称 ,使用两个冒号是为了区别伪类和伪元素。当然,考虑到兼容性,CSS2中已存的伪元素仍然可以使用一个冒号的语法,但是CSS3中新增的伪元素必须使用两个冒号;

2、一个选择器只能使用一个伪元素,并且伪元素必须处于选择器语句的最后,如果我们利用伪元素来进行动画设置,需要给父元素添加样式(position:relative);给:after或者:before添加(position:absolute);

3、某些内容时,只用在css样式表中利用:after与:before来输入内容样式,但更多的,可以结合伪类:hover 来设置动画样式。

这里要注意的是,这几个伪类如果同时出现在一个元素的 *** 作上,顺序不能改变,否则很大程度上会产生紊乱,效果不生效。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11278138.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-14
下一篇 2023-05-14

发表评论

登录后才能评论

评论列表(0条)

保存