1 <!DOCTYPE html>

 2 <html lang="en">

 3

 4 <head>

 5     <meta charset="UTF-8">

 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">

 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">

 8     <meta name="author" content="杨欣">

 9     <title>css3伪元素::before的使用</title>

10     <style>

11         h3{

12             font-size: 24px;

13             margin: 0;

14             padding: 0;

15             white-space: nowrap;

16             overflow: hidden;

17             text-overflow: ellipsis

18         }

19         h3::before{

20             content: attr(title);

21             color: #fff;

22             background: rgb(197, 50, 30);

23             font-size: 16px;

24             margin-right: 10px;

25             padding: 5px

26         }

27     </style>

28 </head>

29

30 <body>

31 <h3 title="置顶">这是文章的标题，这是文章的标题，这是文章的标题。</h3>

32 </body>

33

34 </html>

css3(::before)伪元素的使用的更多相关文章

  1. 使用css3和伪元素制作的一个立体导航条

    使用css3和伪元素制作的一个立体导航条供大家参考,代码如下: <!doctype html> <html lang="en"> <head> ...

  2. CSS3之伪元素选择器和伪类选择器

    伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...

  3. 用CSS3和伪元素绘制三角形

    具体怎样的写法,参照右边链接:https://segmentfault.com/a/1190000002783179 加以改良,不想多一个标签,可以直接利用伪元素,以下面代码为例所示: html代码: ...

  4. CSS3 动态生成内容(在Web中插入内容)====CSS的伪类或者伪元素

    # css3 .类:伪类::伪元素 /* CSS3伪元素/伪类 :https://www.w3.org/TR/css3-selectors/#selectors ::selection 伪元素(F12 ...

  5. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  6. css中伪类和伪元素的区别

    转载:http://www.cnblogs.com/ihardcoder/p/5294927.html CSS3伪类和伪元素的特性和区别   前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常 ...

  7. 转贴：CSS伪类与CSS伪元素的区别及由来具体说明

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  8. CSS躬行记（2）——伪类和伪元素

    一.伪类选择器 伪选择器弥补了常规选择器的不足,能够实现一些特殊情况下的样式,例如在鼠标悬停时或只给字符串中的第一个字符指定样式.与类选择器类似,可以从HTML元素的class属性中查看到,但伪选择器 ...

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

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

随机推荐

  1. Nagios 告警配置太复杂？CA简单实现Nagios自定义多功能告警

    Nagios 是一个插件式的监控系统,可以监控服务的运行状态和网络信息等,并能监视所指定的本地或远程主机参数以及服务,同时提供异常告警通知功能等.Nagios 支持客户端的数据采集,通过编写客户端插件 ...

  2. 极客mysql16

    1.MySQL会为每个线程分配一个内存(sort_buffer)用于排序该内存大小为sort_buffer_size 1>如果排序的数据量小于sort_buffer_size,排序将会在内存中完 ...

  3. 守护进程详解以及start-stop-daemon命令

    1.概念:守护进程是在后台运行的不受终端控制的进程,通常守护进程在系统启动时自动运行,守护进程的名称通常以d结尾,比如sshd.xinetd.crond等. 2.创建守护进程的步骤:a.调用fork( ...

  4. 一张900w的数据表，16s执行的SQL优化到300ms？

    一,前言 证实 有一张财务流水表,未分库分表,目前的数据量为9555695,分页查询使用到了limit,优化之前的查询耗时16 s 938 ms (execution: 16 s 831 ms, fe ...

  5. day01-系统基础信息模块

    前言:2015年,由于大规模采用云平台虚拟机部署应用,每套应用系统的MySQl.接口机.WEB服务器.文件服务器需要经常进行版本升级.配置更新.安全补丁加固.iptables调整.配置核实,大量的手工 ...

  6. invalid PID number "" in "/usr/local/nginx/logs/nginx.pid"

    解决办法: $ sudo nginx -c /usr/local/etc/nginx/nginx.conf $ sudo nginx -s reload

  7. 关于Redis的一些思考

    1.从Java语言考虑,已经有ConcurrentHashMap等并发集合类了,与Redis相比,区别于差异在哪? 一直有这么个疑问,今天有搜了很久,很巧,搜到个有同样想法的问答,如下: When p ...

  8. MathType中的条件概率的输入

    条件概率公式是高中数学的概率知识中比较常用的一个公式,今天我们来介绍一下在MathType中如何输入条件概率公式. 具体步骤如下: 步骤一 打开专业的公式编辑软件MathType 7,在输入框中输入& ...

  9. tcp连接的三次握手

    为什么tcp连接需要三次握手才能建立连接 主要是为了初始化sequence number的初始值,通信的双方要互相通知双方的sequence number,这个要作为以后数据通信的序号,保证以后不会因 ...

  10. C构造类型 数组

    一.数组是什么 一组有个固定大小.相同数据类型的数据的集合. 数组可以分为:一维数组.二维数组.三维数组....(维数不止一维:多维数组) 表格 : 行和列(二维数组) 二.一维数组 1.一般形式 类 ...