Question

I have HTML code like this:

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

How can I place one small red dot in front of the entire text? Kind of like

but red and smaller.

Edit

Just to clarify, I didn’t write this HTML. I just copied and pasted it to show what I’m working with. I realize that I should use an unordered list to do this same task instead of a table structure for this purpose for semantic reasons. If I can, I will see if I can modify this piece of the code to a more suitable one in the customer’s codebase.

Answer 1

I hadn’t noticed that you were using table elements, at first, so I’ll preface my existing answer with the strong suggestion to use an actual ul, or ol, element. Which conveys some form of meaning of the contents therein. Please consider screen-readers, or users with devices that access the data non-visually.

Pretty easily:

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.

Explanation:

The reason for the span within the li elements is that the text-color of the ‘bullet’ (list-style-type: disc;) cannot be changed independently of the text of the li itself. Using the span allows the text contained within to be of a different color to the ‘bullet.’

This is partially related to my own question: How to colour the list-style-type of aut-generated numbers?.

---

However to answer the question as asked:

Using the following image:

The following css will work:

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

JS Fiddle demo.

I leave it entirely to you to find an actual red bullet image.