[CSS] Use Generated Content to Augment Information
When you create a pseudo element, you have access to the parent HTML attributes. They can be used inside the content
attribute of a pseudo element.
[data-length]:hover:after {
content: attr(data-length) " / " attr(data-weight);
color: orange;
position: absolute;
right: 1em;
}
<ul>
<li data-length="12-13 m" data-weight="9,000 kg">Tyrannosaurus</li>
<li data-length="8-9 m" data-weight="1,500 kg">Carnotaurus</li>
<li data-length="4-5 m" data-weight="2,500 kg">Stegosaurus</li>
<li data-length="8-9 m" data-weight="6,000 kg">Triceratops</li>
</ul>
[CSS] Use Generated Content to Augment Information的更多相关文章
- 上线---苹果AppStore审核注意事项,Guideline 1.2 - Safety - User Generated Content,2.1等条例(苹果审核六次拒绝)
前段时间上线app,和战友一起撸了那么久的代码,上线是最激动的.然而安卓各大平台上线了半个月了,苹果却给了六次拒绝. 刚开始等苹果等的焦头烂额,现在内心毫无波澜,目前还在审核中...... 六次的拒绝 ...
- 菜单导航/URHere/面包屑,通过CSS中的content简洁表达代码
比如我们要写一个菜单导航/URHere/面包屑,如: 首页 > 个人中心 > 修改密码 代码: <ul> <li><a href="javascri ...
- CSS counter计数器(content目录序号自动递增)详解
一.CSS计数器三角关系 CSS计数器只能跟content属性在一起的时候才有作用,而content属性貌似专门用在before/after伪元素上的.于是,就有了,“计数器↔伪元素↔content属 ...
- 知道css有个content属性吗?有什么作用?有什么应用?
css的content属性专门应用在 before/after 伪元素上,用来插入生成内容.最常见的应用是利用伪类清除浮动. //一种常见利用伪类清除浮动的代码 .clearfix:after { c ...
- 理解css中的 content:" " 是什么意思
css中的属性是插入生成的内容,它一般与伪元素:befor和 :after 配合使用. content:"." 就表示在需要的地方插入"." 注意:如果已经规定 ...
- CSS中的content和attr的用法
问题缘起 在闲看别人网站时发现了这样的代码 <span class="hamburger icon" data-icon="C"> .icon:be ...
- CSS content内容生成技术以及应用
content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.此特性目前已被大部分的浏览器支持:(Firefox 1.5+, Safari 3.5+, IE ...
- CSS content内容生成技术以及应用(转)
一.哗啦哗啦的简介 zxx://这里“哗啦哗啦”的作用是为了渲染一种氛围.content属性早在 CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.此特性目前已被大部 ...
- CSS content应用
一.简介 content属性早在 CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.此特性目前已被大部分的浏览器支持:(Firefox 1.5+, Safari 3. ...
随机推荐
- 使用Vue动态生成form表单
form-create 表单生成器 具有数据收集.校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框.单选框.输入框.下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择, ...
- javascript 获取HTML DOM父,子,临近节点
在Web应用程序特别是Web2.0程序开发中.常常要获取页面中某个元素,然后更新该元素的样式.内容等.怎样获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有非 ...
- while 循环的理解
if 与 while 的主要区别:if 只判断和执行一次,而 while 却代表着一个循环,执行多少次,要视情况而定: 两种情况(A.B)都会让循环体执行: while A or B: 两种情况(A. ...
- Java学习笔记七 常用API对象三
一.泛型:简单说就是对对象类型进行限定的技术 public class GenericDemo { public static void main(String[] args){ /*泛型作为1.5版 ...
- mobx项目创建 + mobx项目流程代码
一. 安装mobx 1. react 安装并 reject抽离配置 1. 全局安装 create-react-app 这个脚手架 npm/cnpm i create-react-app -g yarn ...
- 在Linux下用CANopenSocket协议模拟CAN总线通讯
一.参考文档 https://github.com/CANopenNode/CANopenSocket //下载 CANopenSocket 的源码 http://elinux.org/Can-uti ...
- 【MongoDB】在windows平台下mongodb的分片集群(六)
在本篇博客中我们主要讨论下博客的管理.因为已经在前面五篇中写了具体的实例,因此这里就不再举例说明. 一.监控 分片集群是整个体系中比較复杂的一块,因此更应该须要监控. 主要命令: serverstat ...
- 如何让Apache不显示服务器信息
如何让Apache不显示服务器信息 Apache的默认配置是会显示服务器信息的,比如访问一个服务器上不存在的页面,Apache会返回"Not Found"的错误,这个错误页面的最下 ...
- 6. MongoDB
https://www.mongodb.com/ https://pan.baidu.com/s/1mhPejwO#list/path=%2F 安装MongoDB# 安装MongoDB http:// ...
- 【CS Round #43 B】Rectangle Partition
[链接]https://csacademy.com/contest/round-43/task/rectangle-partition/ [题意] 水题 [题解] 横着过去,把相邻的边的宽记录下来. ...