[CSS] Use Generated Content to Augment Information
CSS to use content information Generated
2023-09-14 09:00:53 时间
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 Modules ?我们为什么需要他们
- [CSS 3] Use Multiple Background Images to Create Single Element CSS Art
- [CSS 3] Add a Cutout Notch to an HTML Element with a CSS Polygon Clip-Path
- [CSS] Conditionally Assign Style to a Parent Element with Focus-Within Pseudo-class
- [Nuxt] Add CSS Libraries to Nuxt
- [TypeStyle] Add type safety to CSS using TypeStyle
- [CSS] Use CSS Counters to Create Pure CSS Dynamic Lists
- CSS 规范
- [CSS] Choose between Grid layout and flexbox
- [CSS] Using single grid-template-area and justify-self to select arrow down icon in select
- [CSS] Use CSS Variables with Calc and HSL to Implement Dark Mode
- [CSS 3] Use Multiple Background Images to Create Single Element CSS Art
- [CSS] Use CSS pseudo-elements and mix-blend-mode to Create a Duotone Style Effect
- [React] Use CSS Transitions to Avoid a Flash of Loading State
- [CSS3] Make a One-time CSS Animation that Does Not Revert to its Original Style
- [Nuxt] Add CSS Libraries to Nuxt
- 总结html,css中的各种换行方法
- 【CSS】CSS 选择器 ② ( ID 选择器 | 通配符选择器 | CSS 选择器使用注意事项 )
- css外边距合并和z-index的问题