Custom ul bullet with pseudo-selector and alignment

浪子不回头ぞ 提交于 2021-01-28 14:39:20

问题


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>

回答1:


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>



回答2:


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




回答3:


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

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


来源:https://stackoverflow.com/questions/30465257/custom-ul-bullet-with-pseudo-selector-and-alignment

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!