CSS :after 或者 :before选择器

原创 2018年04月17日 10:51:19

定义和用法

:after 选择器在被选元素的内容后面插入内容。

:before 选择器在被选元素的内容前面插入内容。

使用 content 属性来指定要插入的内容。


例子:

WXML代码:


WCSS代码:


效果图:


CSS伪元素选择器:before和:after

CSS 中的伪元素选择器:before 和:after,按照其官方的说法,是在被选中的元素的内容之前插入内容。根据最近几次的实践,我觉得所谓被选中的元素,需要是能包含其他元素的元素,比如,,,等,他们...
  • CSDN_XueXiaoQiang
  • CSDN_XueXiaoQiang
  • 2017-04-18 10:08:24
  • 1137

CSS :before :after 伪类选择器

CSS :before :after 伪类选择器 所有主流浏览器都支持 :after 选择器。 注释:对于 IE8 及更早版本中的 :after,必须声明 。   :before   语法:S...
  • whereismatrix
  • whereismatrix
  • 2015-03-24 10:11:56
  • 2342

CSS伪元素选择器:before与:after

在css标签中有这样子的标签div:before、div:after,对于before、after来说有部分人是相当陌生的,那么这两个标签是什么呢?有什么用处?   :befor、:after是CS...
  • zerlinda_c
  • zerlinda_c
  • 2015-12-07 16:54:58
  • 5854

使用before和after选择器向页面中插入文字图片编号引号

使用选择器在页面中插入内容 使用什么选择器?伪元素选择器before和after。 如何插入?使用before或after选择器的content属性。 插入什么内容?文字,图片,项目编号。注意,...
  • qq_23143555
  • qq_23143555
  • 2017-10-29 18:41:05
  • 189

css-before 和 after的妙用

CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思...
  • u010737354
  • u010737354
  • 2016-03-09 15:29:36
  • 6616

js如何控制css伪元素内容(before,after)

曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出。有个疑问如何用js控制它。于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after ...
  • baidu_31333625
  • baidu_31333625
  • 2017-09-01 14:53:32
  • 281

论CSS ::before 和 ::after

前言 单冒号写法兼容性比较强[可支持解析的浏览器较多],双冒号的写法只支持较新的主流浏览器; W3C的解释用一句话概括:单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪...
  • bomess
  • bomess
  • 2016-04-21 14:43:33
  • 6344

css :before,:after伪元素的理解和妙用

1.基本语法 ·平常仅仅需要将这两个伪元素用于添加一些自定义字符时,只需使用伪类使用的单冒号写法,以保证浏览器的兼容性。不 过,在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号,因此...
  • young_Emily
  • young_Emily
  • 2017-07-17 16:58:08
  • 1198

CSS伪类:before 和 :after

CSS用了许久,对一些伪类熟视无睹,从不想着去搞清楚一下。比如说这个:before :after其实,:before 表示该标记前面的样式,反之 :after 代表设置后面的样式。网页上常常看到有些文...
  • leftfist
  • leftfist
  • 2017-04-14 16:20:15
  • 1611

应用before/after伪类时如何CSS命名以及针对ie6/ie7浏览器兼容

一、诉说前言  before/after伪类相当于在元素内部插入两个额外的标签,其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上,可以简化HTML代码,提高可读性和可维护性。国外这两个伪...
  • sbt0198
  • sbt0198
  • 2015-06-24 14:55:17
  • 1543
收藏助手
不良信息举报
您举报文章:CSS :after 或者 :before选择器
举报原因:
原因补充:

(最多只允许输入30个字)