伪元素content的应用
日常开发中,我们常用:before,:after来实现一些效果,比如
– 边框
– 图标
此时的content中只是为了伪元素能渲染出来而声明
1 2 3 |
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方法嵌入图片
1 |
content: url('./image.png'); |
不过可控性没有background-image高,所以实际场景中较少用到。
以及counter方法实现自增,在此不多加叙述。
伪元素content的应用的更多相关文章
- CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)
CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...
- CSS3与页面布局学习笔记(六)——CSS3新特性(阴影、动画、渐变、变形( transform)、透明、伪元素等)
一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴 ...
- [CSS]利用伪元素实现一些特殊图形
给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS ...
- CSS3新特性(阴影、动画、渐变、变形、伪元素等)
CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等) 目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...
- CSS3新特性(阴影、动画、渐变、变形、伪元素等) CSS3与页面布局学习总结——CSS3新特性(阴影、动画、渐变、变形、伪元素等)
目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原点 三.伪元素 3.1.before 3.2.after 3.3.清除浮动 四.圆角与边 ...
- js分析 汽_车_之_家 js生成css伪元素 hs_kw44_configUS::before
0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...
- [CSS]利用伪元素实现一些特殊图形 from baidu校招
最近在博客园看到某人发的baidu校招题目,说是要用一行html代码实现下面的这个图形: 给定的html代码是: <div class='square'></div> ---- ...
- 伪元素before和after本质
之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但所有的用法和表现行为和真正的页面元素是一样的,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似页面的谋些元素,实际 ...
- css中伪元素before或after中content的特殊用法attr
html代码如下: <div class="haorooms"> <span data-haorooms="haorooms鼠标效果tips-纯css& ...
随机推荐
- 项目源码--Android基于LBS地理位置信息应用的客户端
下载源码 技术要点: 1. LBS应用框架客户端实现 2. 登录与注册系统 3. TAB类型UI实现 4. HTTP通信模块 5. 源码带详细的中文注释 ...... 详细介绍: 1. LBS应用框架 ...
- 使用C#通过Thrift访问HBase
前言 因为项目需要要为客户程序提供C#.Net的HBase访问接口,而HBase并没有提供原生的.Net客户端接口,可以通过启动HBase的Thrift服务来提供多语言支持. Thrift介绍 环境 ...
- DebugView图文教程
Debug信息捕获软件. 可以很方便的捕获系统实时输出的Debug信息,并保存为日志文件.可以远程捕获服务器上的Debug信息. 比较方便开发人员在系统发布前监控一些系统流程和异常,甚至在系统不大的情 ...
- Swift 玩转gif
众所周知,iOS默认是不支持gif类型图片的显示的,但是我们项目中常常是需要显示gif为动态图片.那肿么办?第三方库?是的 ,很多第三方都支持gif , 如果一直只停留在用第三方上,技术难有提高.上版 ...
- [iOS 10 day by day] Day 1:开发 iMessage 的第三方插件
本文介绍了 iOS 10 的一个重要更新:Messages 应用支持第三方插件了.作者用一个小游戏作为例子,说明了插件开发从建工程开始,到绘制界面.收发消息的全过程. <iOS 10 day b ...
- myeclipse2014 安装maven3.3.9和mave配置本地仓库
昨天晚上发现eclipse下一个aptana JS的编辑插件,就想装到myeclipse下,结果悲剧了,myeclipse每次启动都闪退,虽然最后解决了,但是myeclipse里面的自带插件不知少了好 ...
- 3d ListView翻译
作为一个刚毕业的大学生,我要提醒自己时时刻刻要学习. 最近做listview看到很久以前的一个demo,高手如云啊,我们就只有好好加油了. 这是索尼公司的一个员工写的学习博客,由于本人英文能力有限是按 ...
- linux-软连接
ln -s /opt/lampp/bin/mysql(绝对路径) /usr/local/bin(软连接目录或者文件) 如果不愿意配置环境变脸可以直接创建env查出的路径下建连接
- 基本Linux命令总结
常用基本Linux命令总结 学习linux/unix之初,你可能会被上百条的各种命令搞的头昏脑涨,虽然可用的命令有很多,但是日常使用的不过那么几条,如果仅仅是DBA角色而非系统管理员,那么就来一起学习 ...
- P6Spy 、 SQL Profiler
P6Spy 在优化Hibernate性能的时候,很重要的一点就是要看到Hibernate底层执行的SQL 虽然通过打印日志配合Hibernate的show_sql属性能够拼凑出Hibernate底层执 ...