Align text li that wraps when using a custom marker point

Question

I have a little problem, and I was wondering if anyone could come up with a quick fix?

Problem

I have ul of lis that uses custom markers using li: before {content: etc. I'm trying to align the words correctly - you can see on the fourth element li, when the words wrap to the next line they do not start under the word, but under the bullet.

Attempt to fix

• I think this is a problem with bullets using li: before, I tried other ways, but ...
  • I don't want to use li's built-in bullet styles (they are ugly)
  • I tried using styles for a bullet with awesome fonts, but the same thing happens (I suppose they also use the li: before method)
  • I don’t want to manually select the second line, because I change the size of the browser and what not
• Using the li: before method, I tried using absolute positioning to shift the remaining bullets: 3px (as recommended in a similar stackoverflow question), but it also failed to work.

Example

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

(code abbreviated below)

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

The solutions will be great, but even the ideas will be appreciated, thanks!

Answer 1

You can do

http://jsfiddle.net/MS9Z9/7/

 .panel-body ul li:before { content: "➨ "; left: 7px; position: absolute; } .panel-body ul li { border-bottom-style: solid; border-color: #ccc; list-style-type: none; margin: 0; padding: 0.5em 0.5em 0.5em 1.5em; position: relative; } 

Put absolute content before , make your li relatively positioned, and you are free to customize your custom brand

Another alternative is to just put the before content to the left http://jsfiddle.net/MS9Z9/12/

Answer 2

you can also use the display: table property in the a tag, see

Jsfiddle