伪类:after的使用以及结合attr来添加属性的技巧
本案例以实现侧边栏的效果为例来说明
直接上代码看效果:
css
<style type="text/css">
*{margin:;padding:;list-style: none;} ul{position: fixed; right:;top:50%; transform: translate(0,-50%); }
li{width:20px; height:20px; background:#666 url(img/i1.png) no-repeat center center;padding:5px; margin: 10px 0; border-radius:4px 0 0 4px ;cursor: pointer;position: relative; }
li:nth-of-type(2){ background-image: url(img/i2.png); }
li:nth-of-type(3){ background-image: url(img/i3.png); } li:after{ content:attr(name); width:80px; line-height:30px; background-color:#900; position: absolute;top:; right:-90px;color:#fff;padding-left: 10px;
transition:all .5s;
z-index: -1; } li:hover:after{ right:30px; }
li:hover{ border-radius:; background-color: #900; }
</style>
html
利用name像id,class那样是元素都可以添加的特征,然后利用attr在css里来添加属性,再让其在:after里面进行添加内容为文字
这种运用方式很巧妙
<ul>
<li name="购物车"></li>
<li name="我的关注"></li>
<li name="我的脚印"></li>
</ul>
伪类:after的使用以及结合attr来添加属性的技巧的更多相关文章
- CSS伪类选择器
一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...
- CSS 高级:尺寸、分类、伪类、伪元素
CSS 尺寸:允许你控制元素的高度和宽度.同样,还允许你增加行间距. CSS 分类:允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的 ...
- 【CSS】伪类与伪元素
一伪类 语法: selector : pseudo-class {property: value} 提示:伪类名称对大小写不敏感. 与 CSS类搭配使用 selector.class : pse ...
- Selectivizr-让IE6~8支持CSS3伪类和属性选择器
一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...
- CSS 类、伪类和伪元素差别具体解释
CSS中的类(class)是为了方便过滤(即选择)元素,以给这类元素加入样式,class是定义在HTML文档树中的. 可是这在一些情况下是不够用的,比方用户的交互动作(悬停.激活等)会导致元素状态发生 ...
- html中a标签的4个伪类样式
在CSS超链接的属性中,有四个连接方式:a:link a:hover a:visited a:acticve 之前在使用的时候一直是按照自认为的顺序中去写的,就是 L H V A的排序方式,然而有些时 ...
- CSS基础-5 伪类
一.伪类 我们以a标签为例 伪类标签分为4类 1. 设置超链接默认的样式 a:link {属性:值;.....} 或者 a { 属性: 值;} 推荐使用这种方式 2 ...
- 解密jQuery内核 Sizzle引擎筛选器 - 位置伪类(一)
本章开始分析过滤器,根据API的顺序来 主要涉及的知识点 jQuery的组成 pushStack方法的作用 sizzle伪类选择器 首页我们知道jQuery对象是一个数组对象 内部结构 jQuery的 ...
- 【转载】CSS 伪类-:before和:after
:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下: #example:before { conte ...
随机推荐
- 看懂Oracle执行计划、表连接方式
看懂Oracle执行计划 原文:https://www.cnblogs.com/Dreamer-1/p/6076440.html 最近一直在跟Oracle打交道,从最初的一脸懵逼到现在的略有所知,也 ...
- /proc/meminfo
/proc/meminfo 可以查看自己服务器 物理内存 注意这个文件显示的单位是kB而不是KB,1kB=1000B,但是实际上应该是KB,1KB=1024B 这个显示是不精确的,是一个已知的没有被 ...
- mysql 权限管理 对所有库 所有表 授权 *.*
对miek这个账号localhost 授予了所有库,所表的select权限 mysql> grant select on *.* to 'mike'@'localhost'; Query OK, ...
- druid部署
Quickstart单机测试 http://druid.io/docs/0.10.1/tutorials/quickstart.html (1)Getting started 下载安装Druid: c ...
- iOS 网易彩票-2框架搭建-代码重构
在上一篇中,我们基本已经把整个框架都搭建出来了,下面进行代码重构一下. 思路: 导航按钮,按下时,会变灰,那是系统自带了,通过自定义UIButton,实现按下按钮立即切换效果. MJTabBarCon ...
- Twitter OA prepare: Flipping a bit
You are given a binary array with N elements: d[0], d[1], ... d[N - 1]. You can perform AT MOST one ...
- LeetCode7.反转整数
给定一个 32 位有符号整数,将整数中的数字进行反转. 示例 1: 输入: 123 输出: 321 示例 2: 输入: -123 输出: -321 示例 3: 输入: 120 输出: 21 注意: 假 ...
- SQL中SELECT INTO和INSERT INTO SELECT语句介绍
表复制是经常要用到的操作,下面就将为您介绍SQL中SELECT INTO和INSERT INTO SELECT语句,供您参考. Insert是T-sql中常用语句,Insert INTO table( ...
- mysql普通查询日志
- webpack 3 & React 的配置 。
今天真是难过的一天