Question

我想将日期添加到几个文本字符串的末尾，屏幕小于500px。

我的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);
}

所有显示的都是字符串，然后在列表后面是“ - ”

Answer 1

在*之前需要一个空格:after才能将#activities内的所有内容都放到这里：

＆＃13;

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

＆＃13;

      <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>

＆＃13;

希望它有所帮助！

使用带有数据属性的CSS添加内容

1 个答案: