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. PyQt5播放实时视频流或本地视频文件

    目录 编辑UI 新建视频播放类Display 打开相机 关闭相机 显示视频画面 完整源代码 效果图 编辑UI 编辑UI如下图所示: 新建视频播放类Display 定义如下初始化函数 def __ini ...

  2. 分布式监控系统之Zabbix基础

    1.为什么要使用监控系统? 我们知道一个系统不管怎么讲它都会出故障,我们为了保证线上业务的最大化的可用性,通常我们要给关键业务做高可用:做高可用的目的是为了让故障发生时,能够有一个备用的解决方案,将故 ...

  3. 配置xenserver本地存储

    查询磁盘对应关系: [root@xenserver-eqtwbths ~]# ll /dev/disk/by-id/ total 0 lrwxrwxrwx 1 root root 9 Jun 5 13 ...

  4. IAR设置字体

    1.IAR设置字体 第一种方法可以在IDE环境下,选择Tools -> option -> Editor - > Colors and Fonts,然后右边的Editor Font就 ...

  5. Canvas实现放大镜效果完整案例

    本文主要记录 canvas 在图像.文字处理.离屏技术和放大镜特效的实现过程中使用到的API.先看下效果吧: 一张模糊的图片: 鼠标点击任意位置,产生放大效果: 哇塞~ 一个帅哥,哈哈哈哈~ 1.显示 ...

  6. curl 超时问题解决

    curl -o /dev/null -s -w %{time_namelookup}---%{time_connect}---%{time_starttransfer}---%{time_total} ...

  7. swupdate实例

    平台:imx8mm 系统:linux 4.4   如果需要系统了解swupdate,请参考文章:嵌入式系统更新swupdate分类   一.制作升级包 emmcsetup.lua用来描述update执 ...

  8. 给PDF文件创建书签，实现快速导航

    当文档中的页码比较多的情况下,使用目录进行导航是一个很好用的方法,为文档内容制作目录,方便快速查找目标内容.除了内容的快速导航,书签还能指明不同书签的层级关系,展现文档的结构. 图1:书签的功能 一. ...

  9. 使用Eclipse创建Maven的JSP项目

    使用Eclipse创建Maven的JSP项目 MyEclipse2015根本不行,试过各种解决方案都无济于事. 创建Maven项目 此时项目上有错,pom.xml有错. 修改Java版本 生成web. ...

  10. 编程入门选什么语言好？C 语言还是Python ？为你解析

    前面我分享过计算机行业已经成了学校选择排名第一,家长和学生都很看好计算机类专业.现在IT行业也越来越火爆,程序员越来越被人看好.面对相比同龄人高薪资的诱惑,人们很难不心动,即使秃头也值得! 那么问题来 ...