日常开发中,我们常用: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的应用的更多相关文章

  1. CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)

    CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...

  2. CSS3与页面布局学习笔记(六)——CSS3新特性(阴影、动画、渐变、变形( transform)、透明、伪元素等)

    一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴 ...

  3. [CSS]利用伪元素实现一些特殊图形

    给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS ...

  4. CSS3新特性(阴影、动画、渐变、变形、伪元素等)

    CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等)   目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...

  5. CSS3新特性(阴影、动画、渐变、变形、伪元素等) CSS3与页面布局学习总结——CSS3新特性(阴影、动画、渐变、变形、伪元素等)

      目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原点 三.伪元素 3.1.before 3.2.after 3.3.清除浮动 四.圆角与边 ...

  6. js分析 汽_车_之_家 js生成css伪元素 hs_kw44_configUS::before

    0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...

  7. [CSS]利用伪元素实现一些特殊图形 from baidu校招

    最近在博客园看到某人发的baidu校招题目,说是要用一行html代码实现下面的这个图形: 给定的html代码是: <div class='square'></div> ---- ...

  8. 伪元素before和after本质

    之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但所有的用法和表现行为和真正的页面元素是一样的,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似页面的谋些元素,实际 ...

  9. css中伪元素before或after中content的特殊用法attr

    html代码如下: <div class="haorooms"> <span data-haorooms="haorooms鼠标效果tips-纯css& ...

随机推荐

  1. 项目源码--Android基于LBS地理位置信息应用的客户端

    下载源码 技术要点: 1. LBS应用框架客户端实现 2. 登录与注册系统 3. TAB类型UI实现 4. HTTP通信模块 5. 源码带详细的中文注释 ...... 详细介绍: 1. LBS应用框架 ...

  2. 使用C#通过Thrift访问HBase

    前言 因为项目需要要为客户程序提供C#.Net的HBase访问接口,而HBase并没有提供原生的.Net客户端接口,可以通过启动HBase的Thrift服务来提供多语言支持. Thrift介绍 环境 ...

  3. DebugView图文教程

    Debug信息捕获软件. 可以很方便的捕获系统实时输出的Debug信息,并保存为日志文件.可以远程捕获服务器上的Debug信息. 比较方便开发人员在系统发布前监控一些系统流程和异常,甚至在系统不大的情 ...

  4. Swift 玩转gif

    众所周知,iOS默认是不支持gif类型图片的显示的,但是我们项目中常常是需要显示gif为动态图片.那肿么办?第三方库?是的 ,很多第三方都支持gif , 如果一直只停留在用第三方上,技术难有提高.上版 ...

  5. [iOS 10 day by day] Day 1:开发 iMessage 的第三方插件

    本文介绍了 iOS 10 的一个重要更新:Messages 应用支持第三方插件了.作者用一个小游戏作为例子,说明了插件开发从建工程开始,到绘制界面.收发消息的全过程. <iOS 10 day b ...

  6. myeclipse2014 安装maven3.3.9和mave配置本地仓库

    昨天晚上发现eclipse下一个aptana JS的编辑插件,就想装到myeclipse下,结果悲剧了,myeclipse每次启动都闪退,虽然最后解决了,但是myeclipse里面的自带插件不知少了好 ...

  7. 3d ListView翻译

    作为一个刚毕业的大学生,我要提醒自己时时刻刻要学习. 最近做listview看到很久以前的一个demo,高手如云啊,我们就只有好好加油了. 这是索尼公司的一个员工写的学习博客,由于本人英文能力有限是按 ...

  8. linux-软连接

    ln -s /opt/lampp/bin/mysql(绝对路径) /usr/local/bin(软连接目录或者文件) 如果不愿意配置环境变脸可以直接创建env查出的路径下建连接

  9. 基本Linux命令总结

    常用基本Linux命令总结 学习linux/unix之初,你可能会被上百条的各种命令搞的头昏脑涨,虽然可用的命令有很多,但是日常使用的不过那么几条,如果仅仅是DBA角色而非系统管理员,那么就来一起学习 ...

  10. P6Spy 、 SQL Profiler

    P6Spy 在优化Hibernate性能的时候,很重要的一点就是要看到Hibernate底层执行的SQL 虽然通过打印日志配合Hibernate的show_sql属性能够拼凑出Hibernate底层执 ...