开发者

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

  • 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.


    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:

    Red dot similar to "li" element in HTML

    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: •

    &bull; (not valid xhtml)

    or

    &#8226;

    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.

  • 0

    上一篇:

    下一篇:

    精彩评论

    暂无评论...
    验证码 换一张
    取 消

    最新问答

    问答排行榜