Aligning li text that wraps when using custom bullet point

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>

Tags:

Html

Css

Html Lists

Layout

Recent Posts