日常开发中,我们常用: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. 小白日记8:kali渗透测试之主动信息收集(二)三层发现:ping、traceroute、scapy、nmap、fping、Hping

    三层发现 三层协议有:IP以及ICMP协议(internet管理协议).icmp的作用是用来实现intenet管理的,进行路径的发现,网路通信情况,或者目标主机的状态:在三层发现中主要使用icmp协议 ...

  2. mysql颠覆实战笔记(七)--白话理解事务

    今天我们学习web开发级mysql颠覆实战课程第9课没MYSQL事务(一):白话理解事务.前面有两节课第7讲:商品系统设计(四):商品属性设计之自定义属性,第8讲:商品系统设计(五):一维属性的商品价 ...

  3. swift 中异常的处理方法

    swift 中什么时候需要处理异常,在调用系统某个方法的时,该方法最后有一个throws 说明该方法会抛出异常,如果一个方法抛出异常,那么需要对该异常进行处理 swift 异常处理提供了三种方法 方式 ...

  4. Java垃圾回收(GC)与引用的种类

    垃圾回收 GC public class MyObject {     private String id;     public MyObject(String id) {         this ...

  5. python(3)-集合

    集合就是把不同的元素组织在一起,但在集合中不允许有重复的元素. >>> a = set() #创建集合 >>> type(a) <class 'set'> ...

  6. WIN7 X64 如何运行debug

    WIN7 X64 如何运行debug 下载debug.exe 安装dosbox 安装完成后将debug.exe放入某个盘的根目录下(以c盘为例) 然后运行dosbox,输入 mount c c:\ c ...

  7. C# 委托的几种写法

    class Program    {         delegate string Get(string ss);        delegate string Get2(int i);       ...

  8. 小技巧之a标签自动解析URL

    我们可能都知道javascript中的window.location对象用来获取当前页面的地址URL,并把浏览器重定向到新的页面.它有protocol.hostname.host.port.searc ...

  9. Sublime Text—设置浏览器快捷键

    在不同浏览器查看代码效果可谓是家常便饭,所以用不同快捷键打开相应浏览器可以大大提高工作效率. 介绍个简单的方法只需二步: 一.安装插件SideBarEnhancements 打开Package Con ...

  10. css3 巧用结构性伪类选择器

    最近在国外的一个网站上看到的一个关于结构性伪类选择器的用法,觉得十分实用,就自己尝试了一下,并把它给记录下来: 这是最基本的样式: <style type="text/css" ...