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. Java7 新特性 —— java.nio.file 文件操作

    本文部分摘自 On Java 8 自 Java7 开始,Java 终于简化了文件读写的基本操作,新增了 java.nio.file 库,通过与 Java8 新增的 stream 结合可以使得文件操作变 ...

  2. day001|python基础回顾

    1.python是一门编程语言 编程语言是人与计算机能够沟通的一种语言 人----------编程语言---------计算机 2.编程是: ①人将要做的事的步骤想清楚 ②找计算机能够听懂的语言将步骤 ...

  3. IO复用之poll

    主要用一个例程来讲解poll,包含客户端和服务器端. poll函数没有FD_SETSIZE的限制 int poll(struct pollfd * fdarray, unsigned long nfd ...

  4. Python项目1：自动添加标签

    本项目取材自<Python基础教程(第三版)>人民邮电出版社 目标: 本项目给纯文本文件添加格式,使文档转换成其他类型的文档(以HTML为例) 思路: 从原文件提取有用信息: 文档结构-- ...

  5. Jmeter 处理接口乱码

    第一步:添加 BeanShell Listener 第二步: 设置值 : prev.setDataEncoding("UTF-8") 第三步: 重新跑脚本,看接口返回值

  6. 2020年SpringCloud 必知的18道面试题

    今天跟大家分享下SpringCloud常见面试题的知识. 1.什么是Spring Cloud? Spring cloud流应用程序启动器是基于Spring Boot的Spring集成应用程序,提供与外 ...

  7. Web基础_0x00_Web工作方式

    web工作方式 对于普通的上网过程,系统其实是这样做的:浏览器本身是一个客户端,当输入URL的时候,首先浏览器会去请求DNS服务器,通过NDS获取相应的域名对应的IP,然后通过IP地址找到IP对应的服 ...

  8. [PHP安全特性学习]strcmp()函数安全漏洞

    简介 PHP函数的安全特性-strcmp() 函数 php-strcmp()函数 PHP strcmp() 函数 strcmp() 函数比较两个字符串. 注释:strcmp() 函数是二进制安全的,且 ...

  9. 对于线程池ThreadPool的学习总结

    线程池:就是一个管理线程的池子. 优点: 它帮我们管理线程,避免增加创建线程和销毁线程的资源损耗.因为线程其实也是一个对象,创建一个对象,需要经过类加载过程,销毁一个对象,需要走GC垃圾回收流程,都是 ...

  10. FL Studio通道窗口和步进音序器知识讲解

    FL Studio中通道窗口是以样本为概念的音乐制作基础.通道窗口包含了步进音序器并结合了各种丰富的功能,可以通过通道窗口打开各通道的设置窗口.钢琴卷轴等.步进音序器在节奏制作方便表现出很好的优势,它 ...