如何添加创建博客文章的日期，以取代列表样式类型下的项目符号？

Question

Hey I am learning how to create a basic webpage using HTML5 & CSS and I was wondering how I could add the date eg "23 Oct 2013" before each blog post link in place of where the bullet point would be when using list-style-type in CSS. For example:

23 Oct 2013 » How to code in HTML

Would be an example of how it would look like in a browser, bearing in mind that it is a list?

Thanks

Answer 1

By using the CSS :before selector.

Here is a working example.

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

To be a true working blog, the other answers would have you dynamically create css and have a class or id for each date you wanted displayed. It would be better to set list-style-type: none and have your back-end load the dates and post titles, not have it write your css.

HTML/PSEUDOCODE:

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

CSS:

#blog {
    list-style-type: none
}

This way it would look like:

23 Oct 2013 » How to code in CSS

19 Oct 2013 » How to code in HTML