[英]Adding content via CSS with data attribute
I would like to append dates to the end of several strings of text with screens smaller that 500px. 我想将日期附加到屏幕小于500像素的几个文本字符串的末尾。
My HTML is: 我的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>
And my CSS in the media query is: 我在媒体查询中的CSS是:
#activities:after {
content: " - " attr(data-string);
}
All that displays are the strings and then after the list is the " - " 所有显示的是字符串,然后在列表之后是“-”
You need a space and *
before the :after
to get everything inside #activities
like this: 您需要在
:after
之前加一个空格和*
: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>
Hope it helped! 希望能有所帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.