css - 如何在列表样式类型下添加创建博客文章的日期来代替项目符号？

Question

嘿，我正在学习如何使用 HTML5 和 CSS 创建一个基本网页，我想知道如何在每个博客文章链接之前添加日期，例如“2013 年 10 月 23 日”，以代替使用列表样式时的项目符号点-输入 CSS。例如：

2013 年 10 月 23 日 » 如何在 HTML 中编码

将是它在浏览器中的外观示例，请记住它是一个列表？

谢谢

Answer 1

通过使用 CSS:before选择器。

这是一个工作示例。

HTML：

<ul id="blog">
    <li>How to code in HTML</li>
    <li>How to code in CSS</li>
</ul>

CSS：

#blog li:before
{ 
    content:"23 Oct 2013 » ";
}

Answer 2

要成为一个真正的工作博客，其他答案会让您动态创建 css 并为您想要显示的每个日期设置一个类或 id。最好设置list-style-type: none并让您的后端加载日期和帖子标题，而不是让它编写您的 CSS。

HTML/伪代码：

<ul id="blog">
    {% for post in blog %}
    <li class="post">{{ post.date }} » {{ post.title }}</li>
    {% end for %}
</ul>

CSS：

#blog {
    list-style-type: none
}

这样它看起来像：

2013 年 10 月 23 日 » 如何在 CSS 中编码

2013 年 10 月 19 日 » 如何在 HTML 中编码