像img中的文本一样使用data-*

Question

我有这个

<div class="item" data-name="Lorem ipsum"><img src="https://via.placeholder.com/250x350" alt="Lorem"></div>
<div class="item" data-name="Lorem ipsum 2"><img src="https://via.placeholder.com/250x350" alt="Lorem"></div>

我想要什么：

我想将数据名称值中的文本定位在图像元素的顶部。我试图定义

.item[display-name] {
content:'data-name';
display:block;
}

但它不起作用

Answer 1

无引号。缺少attr关键字。你没有把这个：之前或之后

/* <div data-line="1"></div> */
div[data-line]:after { 
content: attr(data-line); /* no quotes around attribute name! */
}

摘自这些例子。https://davidwalsh.name/css-content-attr

Answer 2

基于代码的工作示例：

.item[data-name]::after {
content: attr(data-name);
display:block;
}

<div class="item" data-name="Lorem ipsum 2"><img src="https://via.placeholder.com/250x350" alt="Lorem"></div>