通过带有数据属性的CSS添加内容

我想将日期追加到屏幕小于500px的几个字符串的末尾。通过带有数据属性的CSS添加内容

我的HTML是：

 <div class="left-section" id="activities"> 
     <ul> 
     <li data-string="September 2012 - May 2014">National Student Advertising Competition</li> 
     <li data-string="January 2012 - May 2014">Advertising Club</li> 
     <li data-string="November 2012 - May 2013">Interactive Marketing Association | Student Board Member</li> 
     <li data-string="September 2011 - May 2014">University Intramural Co-Ed Volleyball and Soccer</li> 
     </ul> 
     </div>

和我的媒体查询CSS是：

#activities:after { 
    content: " - " attr(data-string); 
}

所有这些显示器是字符串，然后在列表之后的是 “ - ”

来源

2016-11-12 Paige Bystrom

在:after之前需要一个空间和*以获取#activities这样的内容：

#activities *:after { 
 
    content: " - " attr(data-string); 
 
}

 <div class="left-section" id="activities"> 
 
     <ul> 
 
     <li data-string="September 2012 - May 2014">National Student Advertising Competition</li> 
 
     <li data-string="January 2012 - May 2014">Advertising Club</li> 
 
     <li data-string="November 2012 - May 2013">Interactive Marketing Association | Student Board Member</li> 
 
     <li data-string="September 2011 - May 2014">University Intramural Co-Ed Volleyball and Soccer</li> 
 
     </ul> 
 
     </div>

希望它帮助！

来源

2016-11-12 01:39:50

感谢您的回复！底部的“ - ”消失了，所以我可以假定代码是有效的，但是我仍然有一些错误，因为它不起作用。这是我的网站https://radmint.github.io/ –

我会研究它。 –

好吧，我明白了：我发现了两个问题：1）在样式表的媒体查询中，您使用了“max-device-width”，这似乎不起作用。但是，“最大宽度”确实有效，所以请使用它。 2）你没有正确使用我的代码。你写道：“＃活动：*之后”当你应该写“＃活动*：之后”。修复它，它应该工作。我在开发工具中编辑你的代码，它的工作原理与你想要的一样。 –

通过带有数据属性的CSS添加内容

回答

相关问题