[CSS] Use Generated Content to Augment Information
CSS to use content information Generated
2023-09-14 08:59:19 时间
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规则定义的分类,CSS规则定义英汉对照表[通俗易懂]
- css opacity属性_CSS中的opacity属性[通俗易懂]
- 【罗盘时钟—使用html,js,css编写。附源代码及效果】
- html css制作404页面,CSS3绘制404页面
- CSS3 做一个旋转的立体3D正方形 动效核心【前端就业课 第二阶段】CSS 零基础到实战(07)
- 【说站】CSS简单常用属性的总结
- 使用html css实现180箭头旋转,纯CSS实现箭头旋转「建议收藏」
- CSS 换行_css不允许换行
- To add browser notifications to an online customer support live chat service system - gofly - self h
- 【CSS教程】紫色渐变登陆布局html+css代码
- CSS 盒模型与box-sizing详解编程语言
- The Shapes of CSS(css的形状)详解编程语言
- 器使用Oracle CSS服务器提升业务效率(oracle css服务)
- CSS入门教程篇
- CSS规则层叠的应用css必须要注意的几点
- CSS文字截取功能实现代码
- js设置css的定位
- php压缩多个CSS为一个css的代码并缓存
- phpci框架中加载css和js文件失败的原因及解决方法
- 使用css实现全兼容tooltip提示框