它在这里所做的就是

kovey63054@goul

获取锚点的title属性值并附加content:after锚点。 让它坐得很好 现在我们有了一些简单的标记，并且现在在图像后的悬停/焦点上显示我们的标题，我们将添加一些额外的 CSS 来美化标题并使其位于图像上方，而不是图像下方。 我们首先对包含的列表项进行一些简单的样式设置。这里唯一需要的样式是相对位置。 使用相对位置允许我们绝对定位列表项内的元素。 其他款式都是装饰性的。

ul > li {位置：相对；向左飘 阿曼电话号码列表 浮;列表样式：无；边距：0 20px 20px 0；字体大小：10px； } 向我们的伪类添加更多样式:hover，我们绝对定位 CSS 生成的内容并为其指定高度、背景、行高（这与高度相同，因此我们可以使文本垂直居中）。 我们还对伪类做了同样的:focus事情，这样不能使用鼠标的人仍然可以获得完整的体验。 ul a :hover :after, ul a :focus :after {背景: rgb(255,255,255);底部：2px；内容：attr(标题)；颜色：#000；显示：块；字体粗细：粗体；高度：30px；行高：30px；位置：绝对；文本对齐：居中；宽度：100%； } 我们还将在图像周围添加轮廓，以便在用户聚焦或悬停在图像上时创建漂亮的边框效果。




我们不使用该border属性的原因是因为outline它不会影响它“轮廓”的区域，但border会影响元素。 ul a：悬停img，ul a：焦点img {轮廓：3px实体#ccc; } 使用生成内容的基本样式标题 我们现在有了一个简单而有效的标题叠加层，它具有非常精简的标记和一些简单的 CSS 来创建有效的技术。 让我们进一步扩展它 我们有一个效果很好的简单标题叠加层，但是我们添加一些额外的样式怎么样，这样我们就可以通过添加几行 CSS 来轻松更改标题的位置？ 我们将创建一个.reverse类，可以将其分配给任何锚元素，这些元素将重新定位标题以显示在图像的顶部而不是底部。