红点类似于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小提琴演示.

说明:

元素span内部的原因li是'bullet'(list-style-type: disc;)的文本颜色不能独立li于其自身的文本而改变.使用span允许包含在其中的文本color与'子弹' 不同.

这部分与我自己的问题有关:如何为list-style-type自动生成的数字着色？.

但是要回答问题:

使用以下图像:

以下css将起作用:

td {
    background: #fff url(http://i.stack.imgur.com/Q5lQ4.gif) 0 50% no-repeat;
    padding-left: 14px;
}

JS小提琴演示.

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

Answer 2

如果您想以最简单的方式实现,可以使用HTML实体Bullet:•

• (无效的xhtml)

要么

•

您可以将其包裹在跨度中以根据需要对其进行着色.