html - Aligning li text that wraps when using custom bullet point

Question

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.

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:"27A80a00a0";
}

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

Answer 1

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: "27A80a00a0";
  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>