Red dot similar to "li" element in HTML
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>
&开发者_如何学JAVAlt;/tr>
How can I place one small red dot in front of the entire text? Kind of like
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.
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(http://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.
If you want to do it the simplest way possible, you can use an HTML entity Bullet: •
•
(not valid xhtml)
or
•
You can wrap it in a span to color it as needed.
Web Design Library's How to Assign Custom List Bullets with CSS has a tutorial which uses the list-style-image
CSS property to specify an image.
精彩评论