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. [MIT6.006] 21. Daynamic Programming III: Parenthesization, Edit Distance, Knapsack 动态规划III：括号问题，编辑距离，背包问题

    这节课主要针对字符串/序列上的问题,了解如果使用动态规划进行求解.上节课我们也讲过使用前缀和后缀的概念,他们如下所示: 接下来,我们通过三个问题来深入了解下动态规划使用前缀.后缀和子串怎么去解决括号问 ...

  2. [MIT6.006] 11. Integer Arithmetic, Karatsuba Multiplication 整型算术，Karatsuba乘法

    很多人不喜欢√2的表达,他们认为它不是一个数. 一.卡塔兰数 Catalan numbers 在数方面上,有个著名的数叫卡塔兰数 Catalan numbers,它是组合数学中一个常在各种计数问题中出 ...

  3. nginx&http 第三章 ngx http 框架处理流程

    1. nginx 连接结构 ngx_connection_t 这个连接表示是客户端主动发起的.Nginx服务器被动接受的TCP连接,我们可以简单称其为被动连接.同时,在有些请求的处理过程中,Nginx ...

  4. 使用spring框架进行aop编程实现方法调用前日志输出

    aop编程 之使用spring框架实现方法调用前日志输出 使用spring框架实现AOP编程首先需要搭建spring框架环境: 使用Spring框架实现AOP工程编程之后,不需要我们去写代理工厂了,工 ...

  5. samba配置用户访问方法

    配置目的: 为了给指定用户一个独立访问目录 首先在samba服务器安装samba软件 $ apt-get install samba 然后配置独立访问用户 配置samba用户前提需要是linux的用户 ...

  6. 转载 数据库优化 - SQL优化

    判断问题SQL判断SQL是否有问题时可以通过两个表象进行判断: 系统级别表象CPU消耗严重IO等待严重页面响应时间过长应用的日志出现超时等错误可以使用sar命令,top命令查看当前系统状态. 也可以通 ...

  7. SQL Server 数据库bak备份文件还原操作和mdf文件附加操作

    前言:现在任何软件都离不开数据的支持,数据的价值是无价的,因此数据目前显得尤为重要,日常软件生产库的数据定时或实时备份必不可少,备份出的文件也需要进行验证,下边我将介绍SQL Server数据的的备份 ...

  8. JetCache 源码分析

    一.简介 JetCache是一个基于Java的缓存系统封装,提供统一的API和注解来简化缓存的使用. JetCache提供了比SpringCache更加强大的注解,可以原生的支持TTL.两级缓存.分布 ...

  9. 深度学习论文翻译解析（十四）：SSD: Single Shot MultiBox Detector

    论文标题:SSD: Single Shot MultiBox Detector 论文作者:Wei Liu, Dragomir Anguelov, Dumitru Erhan, Christian Sz ...

  10. Redis订阅

    1.Redis订阅简介 进程间的一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息. 2.Redis订阅命令 3.Redis订阅的使用 先订阅后发布后才能收到消息, 1 可以一次性订 ...