Custom ul bullet with pseudo-selector and alignment

Question

I made a custom bullet for ul with pseudo-selector. But I want the link text position to be align inside. How do I do that? Here's the link to the Fiddle http://jsfiddle.net/bodyfarmer/13q91433/1/

Css:

ul {
/*  list-style-position: outside; */    
    margin-bottom: 0;
    padding-left: 20px;
    padding-right: 30px;
    list-style: none; 
}

li:before {
    content: "\00BB";
    padding-right: 0.5em;
}

HTML:

<ul>
    <li>Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here </li>
    <li>Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here </li>
</ul>

You want the same behavior that: list-style-position: outside; ? — lmgonzalves, May 26 '15 at 17:41

score 4 · Answer 1 · edited Jun 18 '15 at 21:35

4

I think that is better make this with position absolute in :before. That way:

li{
    position: relative;
}

li:before {
    position: absolute;
    left: -20px;
    content: "\00BB";
    padding-right: 0.5em;
}

FIDDLE

edited Jun 18 '15 at 21:35

potashin

44,205
11
83
107

answered May 26 '15 at 17:52

lmgonzalves

6,518
3
22
41

1

Oh, I was just about to post the same. – Mr Lister May 26 '15 at 17:59

Stickers · Accepted Answer · 2015-05-26T18:23:52.963

You could do it as the follows, and adjust -1em if necessary.

http://jsfiddle.net/dyd9topy/

ul {  
    margin-bottom: 0;
    padding-left: 20px;
    padding-right: 30px;
    list-style: none; 
}
li:before {
    content: "\00BB";
    display: inline-block;
    text-indent: -1em;
}

<ul>
    <li>Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here </li>
    <li>Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here </li>
</ul>

score 0 · Answer 3 · answered May 26 '15 at 18:01

0

The first answer works, although a slightly different alternative is:

li:before {
  content: "\00BB";
  position: absolute;
  left: 10px;
}

answered May 26 '15 at 18:01

Findiglay

966
1
7
8

Custom ul bullet with pseudo-selector and alignment

3 Answers3

Linked