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. c++与c

    const char* c_str ( ) const; Get C string equivalent Generates a null-terminated sequence of charact ...

  2. 异常记录-Dialog样式踩坑

    好久没记录文档了,拖了老半个月,终于空下来时间,为了避免以后踩坑,必须记录记录. 背景: 为activity设置样式为弹窗activity 异常一: activity设置style后,布局不能够正常显 ...

  3. 【java从入门到精通】day-06-基本运算符-自增自减运算符

    1.运算符 java语言支持如下运算符: 算术运算符:+,-,*,/,%,++,-- 赋值运算符:= 关系运算符:>,<,>=,<=,==,!=,instanceof 逻辑运算 ...

  4. 丢了ceph.mon.keying解决办法

    在linux操作系统下,可能因为一些很小的误操作,都会造成非常重要的文件的丢失,而文件的备份并不是每时每刻都会注意到,一般是等到文件丢失了才会去想办法,这里讲下ceph.mon.keyring丢失的解 ...

  5. Tarjan算法求割点

    (声明:以下图片来源于网络) Tarjan算法求出割点个数 首先来了解什么是连通图 在图论中,连通图基于连通的概念.在一个无向图 G 中,若从顶点i到顶点j有路径相连(当然从j到i也一定有路径),则称 ...

  6. Java8 方法引用和构造方法引用

    如果不熟悉Java8新特性的小伙伴,初次看到函数式接口写出的代码可能会是一种懵逼的状态,我是谁,我在哪,我可能学了假的Java,(・∀・(・∀・(・∀・*),但是语言都是在进步的,就好比面向对象的语言 ...

  7. Mac系统应该用什么软件进行清理？

    作为一枚资深的Windows系统使用者,小编刚刚转向Mac系统的怀抱时,各种不适应,Windows系统中普遍使用的360清理软件目前暂时没有Mac版本的,这就让小编很是头疼了,大家的Mac都是用的什么 ...

  8. 图片恢复有新招，EasyRecovery预览模式助你快速恢复

    EasyRecovery作为一款数据恢复软件,因其便捷的操作.低廉的价格深受大家的喜爱.EasyRecovery具有"傻瓜式"操作,就算你是第一次接触这款软件,通过主页提示也能很快 ...

  9. react-hash-calendar，移动端日期时间选择插件

    按照惯例,先上效果图 vue 版本同款日历:https://github.com/TangSY/vue-hash-calendar react-hash-calendar 支持手势滑动操作 上下滑动 ...

  10. Pytest自动化测试 - 必知必会的一些插件

    Pytest拥有丰富的插件架构,超过800个以上的外部插件和活跃的社区,在PyPI项目中以" pytest- *"为标识. 本篇将列举github标星超过两百的一些插件进行实战演示 ...