美文网首页
关于伪元素的使用

关于伪元素的使用

作者: Scientist_ab99 | 来源:发表于2018-10-21 18:31 被阅读0次

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

相关文章

  • 细说CSS伪类和伪元素

    原文 博客原文 大纲 1、伪元素2、伪类元素3、伪元素和伪类元素的区别4、伪类和伪元素的使用 1、伪元素 伪元素在...

  • 关于伪元素的使用

    在简书的vue前端开发中,遇到了一些问题,有一个是关于伪元素的使用的,关于伪元素,之前都没有听说过,这次遇到了,查...

  • CSS基础之伪类伪元素&样式优先权

    伪类&伪元素 首字样式控制 —— 使用伪元素::first-letter 首行样式控制 —— 使用伪元素::fir...

  • javascript 伪元素的点击事件

    伪元素的点击事件 1.父元素 使用 ‘pointer-events: none;’ 伪元素使用‘pointer-e...

  • 伪类和伪元素初探

    Css3为了区分伪类和伪元素,伪类使用单冒号:,伪元素使用双冒号:: 常见伪类有 :hover,:link,:ac...

  • CSS伪类和伪元素

    1. 什么是伪类和伪元素1.1. 伪类1.2. 伪元素1.3. 伪类与伪元素的区别 2. 使用 1. 什么是伪类和...

  • CSS

    伪类的语法: CSS 类也可与伪类搭配使用。 伪元素

  • 生成如图所示的样式纪录,有关z-index

    主要使用的是伪类元素,思路如下: 父元素为块级元素,且定位为relative,目的是方便伪类元素相对齐定位。 伪类...

  • 搜索框

    使用type=search的元素 在元素内,使用appearance:none 使用伪元素,去掉不必要的样式 以上...

  • CSS3积累(3)伪元素

    什么是伪元素? CSS 伪元素用于向某些选择器设置特殊效果。 代码 P.S. 在使用before或after伪元素...

网友评论

      本文标题:关于伪元素的使用

      本文链接:https://www.haomeiwen.com/subject/fvnbzftx.html