本案例以实现侧边栏的效果为例来说明

直接上代码看效果:

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来添加属性的技巧的更多相关文章

  1. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  2. CSS 高级:尺寸、分类、伪类、伪元素

    CSS 尺寸:允许你控制元素的高度和宽度.同样,还允许你增加行间距. CSS 分类:允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的 ...

  3. 【CSS】伪类与伪元素

    一伪类 语法: selector : pseudo-class {property: value} 提示:伪类名称对大小写不敏感.    与 CSS类搭配使用 selector.class : pse ...

  4. Selectivizr-让IE6~8支持CSS3伪类和属性选择器

    一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...

  5. CSS 类、伪类和伪元素差别具体解释

    CSS中的类(class)是为了方便过滤(即选择)元素,以给这类元素加入样式,class是定义在HTML文档树中的. 可是这在一些情况下是不够用的,比方用户的交互动作(悬停.激活等)会导致元素状态发生 ...

  6. html中a标签的4个伪类样式

    在CSS超链接的属性中,有四个连接方式:a:link a:hover a:visited a:acticve 之前在使用的时候一直是按照自认为的顺序中去写的,就是 L H V A的排序方式,然而有些时 ...

  7. CSS基础-5 伪类

    一.伪类 我们以a标签为例 伪类标签分为4类     1. 设置超链接默认的样式 a:link {属性:值;.....} 或者 a { 属性: 值;}           推荐使用这种方式     2 ...

  8. 解密jQuery内核 Sizzle引擎筛选器 - 位置伪类(一)

    本章开始分析过滤器,根据API的顺序来 主要涉及的知识点 jQuery的组成 pushStack方法的作用 sizzle伪类选择器 首页我们知道jQuery对象是一个数组对象 内部结构 jQuery的 ...

  9. 【转载】CSS 伪类-:before和:after

    :before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下: #example:before { conte ...

随机推荐

  1. 看懂Oracle执行计划、表连接方式

    看懂Oracle执行计划  原文:https://www.cnblogs.com/Dreamer-1/p/6076440.html 最近一直在跟Oracle打交道,从最初的一脸懵逼到现在的略有所知,也 ...

  2. /proc/meminfo

    /proc/meminfo  可以查看自己服务器 物理内存 注意这个文件显示的单位是kB而不是KB,1kB=1000B,但是实际上应该是KB,1KB=1024B 这个显示是不精确的,是一个已知的没有被 ...

  3. mysql 权限管理 对所有库 所有表 授权 *.*

    对miek这个账号localhost 授予了所有库,所表的select权限 mysql> grant select on *.* to 'mike'@'localhost'; Query OK, ...

  4. druid部署

    Quickstart单机测试 http://druid.io/docs/0.10.1/tutorials/quickstart.html (1)Getting started 下载安装Druid: c ...

  5. iOS 网易彩票-2框架搭建-代码重构

    在上一篇中,我们基本已经把整个框架都搭建出来了,下面进行代码重构一下. 思路: 导航按钮,按下时,会变灰,那是系统自带了,通过自定义UIButton,实现按下按钮立即切换效果. MJTabBarCon ...

  6. 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 ...

  7. LeetCode7.反转整数

    给定一个 32 位有符号整数,将整数中的数字进行反转. 示例 1: 输入: 123 输出: 321 示例 2: 输入: -123 输出: -321 示例 3: 输入: 120 输出: 21 注意: 假 ...

  8. SQL中SELECT INTO和INSERT INTO SELECT语句介绍

    表复制是经常要用到的操作,下面就将为您介绍SQL中SELECT INTO和INSERT INTO SELECT语句,供您参考. Insert是T-sql中常用语句,Insert INTO table( ...

  9. mysql普通查询日志

  10. webpack 3 & React 的配置 。

    今天真是难过的一天