[CSS] Use Generated Content to Augment Information

weixin_30826095

于 2016-10-27 19:09:00 发布

阅读量55

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/6005155.html

本文介绍了一种使用CSS伪元素及attr()函数显示HTML元素数据属性的方法。通过:hover伪类和伪元素:after，可以将包含长度和重量信息的数据属性在鼠标悬停时展示出来。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>