许我们将内容
精明的读者会发现，除了我们在这里讨论的内容之外，这项技术还有巨大的潜力，例如将鼠标悬停在超链接上时显示 CSS 工具提示。 我们将使用这些关键的 CSS 属性、伪类和伪元素来完成我们的技术： content我们将使用 CSS 生成的内容来添加标题，而不是创建不必要的标记来显示标题。 :hover，:focus让我们用鼠标/键盘显示/隐藏标题叠加层。 :after与 content 属性结合使用，动态附加我们的标题内容和布局。生成的内容为王 CSS 生成的 阿曼电话号码列表 内容允附加 ( :after) 或前置 ( :before) 内容到可以显示硬编码内容、动态内容 ( attr())、图像 ( url()) 和计数器 ( counter()) 的元素。 在此示例中，我们将利用该attr()函数从锚 ( ) 标记中提取标题属性<a>。 <li> <a href="#" title="农场日出" > <img src="img01.jpg" width="200" height="206" alt="美丽的日出" /> </a> </li> ul a:hover:after { 内容: attr(标题) ; } 使用生成内容的基本图像标题 正如您从上面所看到的，标记非常简单，并且使用 content 属性使我们能够创建一些出色的行为，而不会造成臃肿。
https://bolddata.me/wp-content/uploads/2024/04/Add-a-heading-6-300x300.png
它在这里所做的就是获取锚点的title属性值并附加content:after锚点。 让它坐得很好 现在我们有了一些简单的标记，并且现在在图像后的悬停/焦点上显示我们的标题，我们将添加一些额外的 CSS 来美化标题并使其位于图像上方，而不是图像下方。 我们首先对包含的列表项进行一些简单的样式设置。这里唯一需要的样式是相对位置。 使用相对位置允许我们绝对定位列表项内的元素。 其他款式都是装饰性的。
頁:
[1]