CODEWITHSUNDEEP
css
Meek
Meek

Reputation: 3348

Ul li with bullets made with ":before" - how to indent 2nd line of text

I have a list with up to four sub levels. Bullets are made with :before. I have some trouble getting the 2nd line of text line up with the first one.

I have tried setting padding and text-indent like this:

ul {
  padding-left: 1em;
  text-indent: -1em;
}

- but it doesn't work. Setting list-style-position: outside doesn't seem to work either.

JSFIDDLE here

Any ideas?

Upvotes: 0

Views: 74

Answers (3)

KanUXD
KanUXD

Reputation: 707

Below code should work:

.menu {
    width: 250px;
}

ul{
  list-style:none;
}

/* Setting the position of <a> and a:before*/
ul.nav li a{
  position:relative; /* Setting this to relative so that we position a:before absolute to <a> */
  padding-left:10px; /* We are moving the text to right by 10px */
  display:block;
}

ul.nav li a:before{
 position:absolute; /* This is the main css rule which gets our desired result */
 left:-5px; /* setting the left position */
 top:4px;   /* setting the top position */
}

/* Setting Styles of <li> */

ul.nav>li>a:before {
   
    font-family: 'Glyphicons Halflings';
    font-size: 7px;
    color: #901a1e;
    content: "\e080";
    border: 1px solid #d7d7d7;
}

ul.nav>li ul li>a:before {
    font-size: 9px;
    color: #901a1e;
    content: "\25A0";
}
<div class="menu">
    <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Sub menu here</a>
            <ul>
                <li><a href="#">Link 2.1 - one more very, very, very, long text</a></li>
                <li class="active"><a href="#">Link 2.2 - active</a></li>
                <li><a href="#">Link 2.3</a></li>
            </ul>
        </li>
        <li><a href="#">Separated link</a>
        </li>
        <li><a href="#">Separated link</a>
            <ul>
                <li><a href="#">Link 2.1</a>
                    <ul>
                        <li><a href="#">Link 3.1</a></li>
                        <li><a href="#">Link 3.2</a></li>
                        <li><a href="#">Link 3.3</a>
                            <ul>
                                <li><a href="#">Link 4.1 - one more very, very, very, long text</a></li>
                                <li><a href="#">Link 4.2</a></li>
                                <li><a href="#">Link 4.3</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">One more very, very, very, long separated link</a></li>
        <li><a href="#">One more separated link</a></li>
    </ul>
</div>

Upvotes: 0

Mihai T
Mihai T

Reputation: 17687

use the same line-height on :before as on the a element

see snippet :

.menu {
    width: 250px;
}
/* First level */
ul.nav>li>a:before {
    float: left;
    margin: 3px 6px 4px 0;
    font-family: 'Glyphicons Halflings';
    font-size: 7px;
    color: #901a1e;
    content: "\e080";
    border: 1px solid #d7d7d7;
   
}
/* Sub levels */
ul.nav>li ul li>a:before {
    float: left;
    margin-right: 6px;
    font-size: 9px;
    color: #901a1e;
    content: "\25A0";
    line-height:16px;
}

ul li {
    list-style-type: none;

}
ul li a {
  line-height:16px;
}
<div class="menu">
    <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Sub menu here</a>
            <ul>
                <li><a href="#">Link 2.1 - one more very, very, very, long text</a></li>
                <li class="active"><a href="#">Link 2.2 - active</a></li>
                <li><a href="#">Link 2.3</a></li>
            </ul>
        </li>
        <li><a href="#">Separated link</a>
        </li>
        <li><a href="#">Separated link</a>
            <ul>
                <li><a href="#">Link 2.1</a>
                    <ul>
                        <li><a href="#">Link 3.1</a></li>
                        <li><a href="#">Link 3.2</a></li>
                        <li><a href="#">Link 3.3</a>
                            <ul>
                                <li><a href="#">Link 4.1 - one more very, very, very, long text</a></li>
                                <li><a href="#">Link 4.2</a></li>
                                <li><a href="#">Link 4.3</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">One more very, very, very, long separated link</a></li>
        <li><a href="#">One more separated link</a></li>
    </ul>
</div>

Upvotes: 0

Mohammad Usman
Mohammad Usman

Reputation: 39322

Its better to use position: absolute instead of float to align bullets.

.menu {
  width: 250px;
}
ul.nav>li>a {
  position: relative;
}
/* First level */
ul.nav>li>a:before {
  position: absolute;
  font-family: 'Glyphicons Halflings';
  font-size: 7px;
  color: #901a1e;
  content: "\e080";
  border: 1px solid #d7d7d7;
  left: 0;
  top: 13px;
}
/* Sub levels */
ul.nav>li ul li>a {
  display: inline-block;
  vertical-align: top;
  padding-left: 10px;
  position: relative;
}
ul.nav>li ul li>a:before {
  position: absolute;
  font-size: 9px;
  color: #901a1e;
  content: "\25A0";
  left: 0;
  top: 3px;
}

ul li {
  list-style-type: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="menu">
  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Sub menu here</a>
      <ul>
        <li><a href="#">Link 2.1 - one more very, very, very, long text</a></li>
        <li class="active"><a href="#">Link 2.2 - active</a></li>
        <li><a href="#">Link 2.3</a></li>
      </ul>
    </li>
    <li><a href="#">Separated link</a>
    </li>
    <li><a href="#">Separated link</a>
      <ul>
        <li><a href="#">Link 2.1</a>
          <ul>
            <li><a href="#">Link 3.1</a></li>
            <li><a href="#">Link 3.2</a></li>
            <li><a href="#">Link 3.3</a>
              <ul>
                <li><a href="#">Link 4.1 - one more very, very, very, long text</a></li>
                <li><a href="#">Link 4.2</a></li>
                <li><a href="#">Link 4.3</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">One more very, very, very, long separated link</a></li>
    <li><a href="#">One more separated link</a></li>
  </ul>
</div>

Upvotes: 2

Related Questions