CODEWITHSUNDEEP
jqueryhtmlcsshtml-lists
next_user
next_user

Reputation: 293

Text before bullet in unordered list

Is it possible when creating a html unordered list <ul> to add text before the bullet? The result i am trying to achieve would look similar to this:

T1 * more text1

T2 * more text2

T3 * more text3

where * are the bullets in the ul.I kept searching pretty much everywhere but i can't seem to find anything and have no idea from where to start. I tried to add text before the li, but the result is not what I expected:

T1

  • text1
    • T2
  • text2
    • T3
  • text3

    • Upvotes: 3

    Views: 3583

    Answers (5)

    Akshay Gundewar
    Akshay Gundewar

    Reputation: 954

    Using :before pseudo here would restrict the use of different text. Wrapping the text which you need with some tag before the bullets will make it easier to give appropriate classes to it.

    Check this JsFiddle for working example.

    Upvotes: 4

    Paulie_D
    Paulie_D

    Reputation: 115099

    You can do this CSS counters and a pseudo-element.

    CSS Counters @ MDN

    ul {
  list-style-type: none;
  counter-reset: section;
}
li:before {
  counter-increment: section;
  content: "T"counter(section)". ";
}
    <ul>
  <li>Some Text</li>
  <li>Some Text</li>
  <li>Some Text</li>
  <li>Some Text</li>
  <li>Some Text</li>
</ul>

    Upvotes: 1

    Shoeb Mirza
    Shoeb Mirza

    Reputation: 918

    <ul>
  <span style="float: left; margin-right: 20px;">Hi!</span><li> Hello</li>
  <span style="float: left; margin-right: 20px;">Hi!</span><li> Hello</li>
  <span style="float: left; margin-right: 20px;">Hi!</span><li> Hello</li>
  <span style="float: left;margin-right: 20px;">Hi!</span><li> Hello</li>
</ul>

    http://codepen.io/anon/pen/RPbgmR

    Upvotes: 0

    Mina Marcos
    Mina Marcos

    Reputation: 29

    Can you try display inline for both the text and the li ? i hope that will help

    Upvotes: 0

    Jacob Morris
    Jacob Morris

    Reputation: 500

    Here's an easy way to do it using CSS. First, remove the current bullets:

    li{
list-style-type: none;
}

    Then, before every list item, add the content you want to add, followed by a bullet. Like so:

    ul li:before{
content: 'hi \2022';
}

    Hope this helps!

    DEMO

    Upvotes: 2

    Related Questions