Aligning li text that wraps when using custom bullet point

css, html, html-lists, layout

Solution

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>

Problem

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:"\27A8\00a0\00a0"; } ``` Solutions would be great but even ideas are appreciated, thank you!

Original source