Skip to content

[css] 第121天 请举例说明伪元素 (pseudo-elements) 有哪些用途? #1066

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第121天 请举例说明伪元素 (pseudo-elements) 有哪些用途?

Activity

xiangshuo1992

xiangshuo1992 commented on Aug 15, 2019

@xiangshuo1992
Contributor
  1. 作为实际DOM元素使用
  2. 作为一些视觉装饰性的元素使用
LinStan

LinStan commented on Aug 15, 2019

@LinStan

可以用于给元素添加伪元素来调整布局。
可以添加伪元素,通过content添加内容

forever-z-133

forever-z-133 commented on Aug 16, 2019

@forever-z-133
  1. 可以不用再多写一个 dom
  2. 可以用 content 搭配出很多效果

例子:

  1. 固定尺寸 2:1 的容器
  2. 文本前后增加 icon 或图片
  3. 使用 data-* 和 content: attr(data-*) 搭配
  4. 使用 :hover 和 content 搭配出很多效果
  5. 作为修饰元素
  6. 使用 content: counter() 玩有序数字
  7. 参与 inline-block 垂直居中
nowherebutup

nowherebutup commented on Oct 17, 2019

@nowherebutup

我经常用于装饰性的元素,不用再多写一个其他元素

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@xiangshuo1992@forever-z-133@LinStan@nowherebutup

        Issue actions

          [css] 第121天 请举例说明伪元素 (pseudo-elements) 有哪些用途? · Issue #1066 · haizlin/fe-interview