Aligning li text that wraps when using custom bullet point

I've got a minor problem and was wondering if anyone could come up with a quickfix?

The problem

I've got a ul of lis which uses custom bullet points using li:before { content: etc. I'm trying to get the words to align properly - you can see on the fourth li item, when the words wrap to the next line they don't start under the word but under the bullet.

enter image description here

Attempted fixes

Thinking that it's a problem doing the bullets using li:before, I tried other ways, but...
- I don't want to use the built in li bullet styles (they ugly)
- I've tried using the font-awesome bullet stylings but the same thing happens (I presume they also use the li:before method)
- I don't want to manually space out the second line because changing browser sizes and what not
Using the li:before method I tried using absolute positioning to shift the bullets left:3px (as recommended in a similar stackoverflow question) but haven't got that to work either.

Example

Click here to see a demo of the problem: http://jsfiddle.net/MS9Z9/

(below code is abbreviated)

.panel-body ul li {
    list-style-type:none;
}
.panel-body ul li:before {
    content:"\27A8\00a0\00a0";
}

Solutions would be great but even ideas are appreciated, thank you!

You can do

body .sidebar {
  background-color: #ccc;
  padding: 20px;
  width: 330px;
  float: right;
}

.panel-head {
  background-color: #53d;
  color: #fff;
  padding: .3em;
  text-align: center;
  font-family: @fancyfont;
  font-size: 1.2em;
}

.panel-body {
  color: #aaa;
  background-color: #fff;
}

.panel-body ul {
  display: inline;
  padding: 0;
}

.panel-body ul li {
  padding: 0.5em 0.5em 0.5em 1.5em;
  border-bottom-style: solid;
  border-color: #ccc;
  list-style-type: none;
  margin: 0;
  position: relative;
}

.panel-body ul li:last-child {
  border-bottom-style: none;
}

.panel-body ul li a {
  text-decoration: none;
}

.panel-body ul li a:visited {
  color: #000;
}

.panel-body ul li:before {
  content: "\27A8\00a0\00a0";
  position: absolute;
  left: 7px;
}

.panel-body ul li:hover,
.panel-body ul li:hover a {
  background-color: #53d;
  color: #fff;
}

<div class="sidebar">
  <div class="panel">
    <div class="panel-head">
      <p>Your Menu</p>
    </div>
    <div class="panel-body">
      <ul>
        <li><a href="#">Lorem ipsum dolor</a>
        </li>
        <li><a href="#">Lorem ipsum dolor</a>
        </li>
        <li><a href="#">Lorem ipsum dolor</a>
        </li>
        <li><a href="#">Lorem ipsum dolor</a>
        </li>
        <li><a href="#">Lorem ipsum dolor</a>
        </li>
        <li><a href="#">Lorem ipsum dolor</a>
        </li>
        <li><a href="#">Lorem ipsum dolor sit amet draco dormiens numquam titallandus</a>
        </li>
        <li><a href="#">Lorem ipsum dolor</a>
        </li>
        <li><a href="#">Lorem ipsum dolor</a>
        </li>
      </ul>
    </div>
  </div>

Position the before content absolute, make your li relatively positioned and you can freely adjust the custom bullet

Another alternative is just to float the before content left

body .sidebar {
  background-color: #ccc;
  padding: 20px;
  width: 330px;
  float: right;
}

.panel-head {
  background-color: #53d;
  color: #fff;
  padding: .3em;
  text-align: center;
  font-family: @fancyfont;
  font-size: 1.2em;
}

.panel-body {
  color: #aaa;
  background-color: #fff;
}

.panel-body ul {
  display: inline;
  padding: 0;
}

.panel-body ul li {
  padding: 0.5em;
  border-bottom-style: solid;
  border-color: #ccc;
  list-style-type: none;
  margin: 0;
}

.panel-body ul li:last-child {
  border-bottom-style: none;
}

.panel-body ul li a {
  text-decoration: none;
}

.panel-body ul li a:visited {
  color: #000;
}

.panel-body ul li:before {
  content: "\27A8\00a0\00a0";
  float: left;
}

.panel-body ul li:hover,
.panel-body ul li:hover a {
  background-color: #53d;
  color: #fff;
}

<body>
  <div class="sidebar">
    <div class="panel">
      <div class="panel-head">
        <p>Your Menu</p>
      </div>
      <div class="panel-body">
        <ul>
          <li><a href="#">Lorem ipsum dolor</a>
          </li>
          <li><a href="#">Lorem ipsum dolor</a>
          </li>
          <li><a href="#">Lorem ipsum dolor</a>
          </li>
          <li><a href="#">Lorem ipsum dolor</a>
          </li>
          <li><a href="#">Lorem ipsum dolor</a>
          </li>
          <li><a href="#">Lorem ipsum dolor</a>
          </li>
          <li><a href="#">Lorem ipsum dolor sit amet draco dormiens numquam titallandus</a>
          </li>
          <li><a href="#">Lorem ipsum dolor</a>
          </li>
          <li><a href="#">Lorem ipsum dolor</a>
          </li>
        </ul>
      </div>
    </div>
</body>

Recommended topics

Hot tags