伪元素content的应用
In CSS3,移动开发 on 2015年10月31日 by view: 3,434
5

日常开发中,我们常用:before,:after来实现一些效果,比如

– 边框 
    
– 图标

    

此时的content中只是为了伪元素能渲染出来而声明

事实上,content属性不仅仅支持字符串,也支持一些内置的css方法。

 

使用content: attr(arribute-name)可以实现HTML与CSS的“通讯”,使得伪元素能读取当前元素的属性。看以下例子

 

在图中,要实现多行文本的自动截断,然而,设计上还在第三行末尾增加了一个小箭头,没办法使用简单粗暴的flex-box的-webkit-line-clamp:3来搞定。

通过拜读移动端做文本尾行留空截断处理的一个方案 , 实现了这个效果。
这时就可以用伪元素了。具体实现上,before和after均通过content获取文本,before展示前两行,而after则通过padding-righttext-indent的配合,给箭头腾了个空位。

 

 

 当然,这只是attr的一个应用场景,还可以通过content来实现一个自定义的tooltip等等。

 

content属性还支持url方法嵌入图片

不过可控性没有background-image高,所以实际场景中较少用到。

 

以及counter方法实现自增,在此不多加叙述。

 

参考文章:移动端做文本尾行留空截断处理的一个方案 

 

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2015/10/usage-of-content-attibute-of-pseudo-elements/

  1. 粉嫩性感妹 2015 年 11 月 30 日

    的确好文章,推荐加精华

  2. hacke2 2015 年 11 月 2 日

    最后一个如果有demo就完美了

  3. 馒头 2015 年 11 月 1 日

    直接设置 最大三行文字 的height 不就行了么
    干嘛搞这么复杂

    • 尔威404 2015 年 11 月 1 日

      需要在第三行的末尾进行带ellipsis截断,而且还有右侧要留出空位,用height是不行的。当然也可以用js做截断。

      • 馒头 2015 年 11 月 3 日

        嗯 才发现这样是最好的

发表评论