红点类似于HTML中的“li”元素

Question

我有这样的HTML代码：

<tr>    
  <td align="left" valign="bottom"  class="leftfooter"><a href="#">Customer Support</a> <a href="#" class="footerlink">About</a></td>
</tr>

如何在整个文本前放置一个小红点？有点像

但是又红又小。

修改

只是为了澄清，我没有写这个HTML。我只是复制并粘贴它以显示我正在使用的内容。我意识到出于语义原因，为了这个目的，我应该使用无序列表来执行相同的任务而不是表结构。如果可以的话，我会看看是否可以将这段代码修改为客户代码库中更合适的代码。

Answer 1

我一开始并未注意到您使用的是table元素，因此我将使用强烈建议作为现有答案的前言，以使用实际的ul ，或ol，元素。其中传达了内容的某种形式的含义。 请考虑使用屏幕阅读器或具有非视觉访问数据的设备的用户。

非常容易：

HTML：

<ul>
    <li><span>Some text</span></li>
    <li><span>more stuff</span></li>
</ul>

的CSS：

ul {
    margin-left: 2em;
    padding-left: 1em;
    list-style-type: disc;
}

li {
    list-style-type: disc;
    color: #f00;
}

li > span {
    color: #000;
}

JS Fiddle demo

说明：

span元素中li的原因是'bullet'（list-style-type: disc;）的文本颜色无法独立于{{1}的文本进行更改本身。使用li可以使其中包含的文字与“项目符号”不同span。

这与我自己的问题部分相关：How to colour the list-style-type of aut-generated numbers?。

---

然而要回答问题：

使用以下图片：

以下css将起作用：

color

JS Fiddle demo

我完全留给你找一个真正的红色子弹图像。

Answer 2

如果您想以最简单的方式进行，可以使用HTML实体Bullet：•

•（无效的xhtml）

或

•

您可以将其包裹在一个范围内，以根据需要为其着色。

Answer 3

Web Design Library的How to Assign Custom List Bullets with CSS有一个教程，它使用list-style-image CSS属性来指定图像。