css3(::before)伪元素的使用
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)伪元素的使用的更多相关文章
- 使用css3和伪元素制作的一个立体导航条
使用css3和伪元素制作的一个立体导航条供大家参考,代码如下: <!doctype html> <html lang="en"> <head> ...
- CSS3之伪元素选择器和伪类选择器
伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...
- 用CSS3和伪元素绘制三角形
具体怎样的写法,参照右边链接:https://segmentfault.com/a/1190000002783179 加以改良,不想多一个标签,可以直接利用伪元素,以下面代码为例所示: html代码: ...
- CSS3 动态生成内容(在Web中插入内容)====CSS的伪类或者伪元素
# css3 .类:伪类::伪元素 /* CSS3伪元素/伪类 :https://www.w3.org/TR/css3-selectors/#selectors ::selection 伪元素(F12 ...
- CSS伪类与CSS伪元素的区别及由来
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...
- css中伪类和伪元素的区别
转载:http://www.cnblogs.com/ihardcoder/p/5294927.html CSS3伪类和伪元素的特性和区别 前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常 ...
- 转贴:CSS伪类与CSS伪元素的区别及由来具体说明
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...
- CSS躬行记(2)——伪类和伪元素
一.伪类选择器 伪选择器弥补了常规选择器的不足,能够实现一些特殊情况下的样式,例如在鼠标悬停时或只给字符串中的第一个字符指定样式.与类选择器类似,可以从HTML元素的class属性中查看到,但伪选择器 ...
- CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)
CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...
随机推荐
- kafka消费者offset存储策略
由于 consumer 在消费过程中可能会出现断电宕机等故障,consumer 恢复后,需要从故 障前的位置的继续消费,所以 consumer 需要实时记录自己消费到了哪个 offset,以便故障恢 ...
- 03 原型模式(prototype)
03 原型模式(prototype) 1 克隆羊问题 现在有一只羊tom,姓名为: tom.年龄为: 1,颜色为:白色,请编写程序创建和tom羊属性完全相同的10只羊. 2 传统方式解决 思路 cla ...
- 了解LockSupport工具类
介绍: 在网上也没有找到太多的东西,大概说了一下,这个工具类的所有方法都是静态的,底层采用UNSAFE直接操作的内存,可以实现线程的阻塞和唤醒 可以看到他的park方法调用的是UNSAFE的park方 ...
- linux绑定盘符
[root@centos6 ~]# udevadm info -q path -n /dev/sdb [root@centos6 ~]# udevadm info -q path -n /dev/sd ...
- Python_opencv库
1.车牌检测 ''' 项目名称:opencv/cv2 车牌检测 简介: 1.训练级联表 ***.xml [跳过...] 2.用如下代码加载级联表和目标图片识别车牌 注:推荐用anconda安装open ...
- git操作之三:git reset
在上篇文章中介绍了git restore命令,该命令的可以看作是撤销命令,文件在不同的状态下,使用git restore <file> 命令,会撤销对文件的修改,是文件回到修改前的状态也就 ...
- 我要进大厂之大数据MapReduce知识点(1)
01 我们一起学大数据 老刘今天分享的是大数据Hadoop框架中的分布式计算MapReduce模块,MapReduce知识点有很多,大家需要耐心看,用心记,这次先分享出MapReduce的第一部分.老 ...
- 蓝鲸平台开启consul.conf UI界面
#第一步: vi /data/bkce/etc/supervisor-consul.conf 修改参数: command=/usr/bin/consul agent -config-file=/dat ...
- FL Studio 插件使用技巧——Fruity Reeverb 2(下)
了解大教堂声场的特点 上节教程中我们说到,混响具有营造空间感的作用.当我们想要在FL Studio软件中用Fruity Reeverb 2 插件有目标地模仿一个特定空间的环境时,我们需要充分了解该空间 ...
- 思维导图MindManager流程图有哪些功能
流程图是思维导图中的一种图表,应用相当广泛.MindManager 2020作为专业的思维导图软件,更加强了流程图的功能,让用户能使用更加简便的MindManager技巧绘制流程图.接下来,就让我们一 ...