伪元素content的应用——w3cdream|前端学习-开发

'I'm W3cdream,创造',前·所·未·有
伪元素content的应用

发布作者:萧强   发布时间:2016-03-2   阅读次数:5546

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

– 边框 
    
– 图标

    

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

div:before{
	  content: "";
	}

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

 

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

 

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

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

 

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

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

content: url('./image.png');

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

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

参考文章:移动端做文本尾行留空截断处理的一个方案
转载自AlloyTeam:http://www.alloyteam.com/2015/10/usage-of-content-attibute-of-pseudo-elements/

常用昵称:萧强,全端布道者

姓名:“刘晓强”,W3CDream创始人,目前就职于易点付。专注于web前端和移动端方面知识的研究,熟练掌握photoshop和AI,喜爱Flat UI设计和Metro UI风格,熟练掌握CSS3+HTML5技术、LESS CSS和Sass CSS,还有jQuery框架方面及一些前端框架bootstrap响应式设计等。新浪微博
上一篇:[转载]玩轉 CSS 3D: 原理篇
下一篇:已经没有下一篇内容了
友荐云推荐

CSS3直通车

热点文章

新闻资讯

标签云

友情赞助