通過帶有數據屬性的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添加內容

回答

相關問題