SpringBoot第十篇:SpringBoot 之Thymeleaf:如何实现动态修改标签的after伪元素的内容(无需写js)
我想实现利用thymeleaf获取的数据,动态设置a标签hover动作时,after的content值
但是百度之后,都是要利用js获取thymeleaf的静态数据,然后在js中用$('标签').attr();方法设置。
不过很难受,鼠标hover在a标签的时候,总是无法获取数据的值,后来经过调试和实验。发现一种简便的实现方式。
1.设置CSS的content为attr(data),以便获取data的值
content: attr(data);
2.直接在html标签上用th:data=“${静态数据}”,即可将静态数据设置到after的content的data上,也避免了因为相同类型的a标签不能动态展示。
效果如下: