CSS 带箭头的样式项目符号列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46802769/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Style bullet-list with arrows
提问by Lavonen
I have created an arrow that I would like to attach to a list instead of the round bullet points. I have tried to use the :after but haven't succeeded yet, have to confess that I'm very new to pseudo-elements...
我创建了一个箭头，我想将其附加到列表而不是圆形项目符号。我曾尝试使用 :after 但还没有成功，不得不承认我对伪元素很陌生......
Here's what I got so far:
这是我到目前为止所得到的：
#arrow {
border-right:2px solid black;
border-bottom:2px solid black;
width:10px;
height:10px;
transform: rotate(-45deg);
margin-top:40px;
}
ul li {
padding-bottom: 10px;
}
ul li:before{
border-right:5px solid black;
border-bottom:5px solid black;
width:10px;
height:10px;
transform: rotate(-45deg);
margin-top:40px;
}<!-- Arrow below -->
<div id="arrow"></div>
<!-- Want to place arrow where bullet points are -->
<ul>
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
<li>Item #4</li>
<li>Item #5</li>
</ul>Anyone who got any ideas?
任何有任何想法的人？
采纳答案by Saurav Rastogi
Use content: ''with pseudo elements (:beforeor :after). And use list-style: nonefor ulto remove the bullets. Like:
使用content: ''与伪元素（:before或:after）。并list-style: none用于ul移除子弹。喜欢：
ul {
list-style: none;
}
ul li:before{
content: '';
position: absolute;
border-right:2px solid black;
border-bottom:2px solid black;
width:10px;
height:10px;
top: calc(50% - 4px);
left: -20px;
transform: translateY(-50%) rotate(-45deg);
}
Have a look at the snippet below:
看看下面的片段：
#arrow {
border-right:2px solid black;
border-bottom:2px solid black;
width:10px;
height:10px;
transform: rotate(-45deg);
margin-top:40px;
}
ul li {
position: relative;
padding-bottom: 10px;
}
ul {
list-style: none;
}
ul li:before{
content: '';
position: absolute;
border-right:2px solid black;
border-bottom:2px solid black;
width:10px;
height:10px;
top: calc(50% - 4px);
left: -20px;
transform: translateY(-50%) rotate(-45deg);
}<!-- Want to place arrow where bullet points are -->
<ul>
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
<li>Item #4</li>
<li>Item #5</li>
</ul>Hope this helps!
希望这可以帮助！
回答by Jamie Humphries
Not directly answering the question asked, but hopefully useful to some people who found this question from a search like I did!
不直接回答提出的问题，但希望对一些像我一样从搜索中发现这个问题的人有用！
Using roughly the same idea as other answers, but with a simpler ::beforepseudo-element, you can use any unicode arrow character for your bullet rather than messing about with borders on divs:
使用与其他答案大致相同的想法，但使用更简单的::before伪元素，您可以使用任何 unicode 箭头字符作为您的项目符号，而不是搞乱 div 上的边框：
ul {
position: relative;
list-style: none;
}
li::before {
content: '?';
position: absolute;
left: 0;
}
Here is a list of unicode arrows, so you can find something that you like: http://xahlee.info/comp/unicode_arrows.html
这里是一个 unicode 箭头列表，所以你可以找到你喜欢的东西：http: //xahlee.info/comp/unicode_arrows.html
回答by Lekhraj
just add content in before and display inline-block
#arrow {
border-right:2px solid black;
border-bottom:2px solid black;
width:10px;
height:10px;
transform: rotate(-45deg);
margin-top:40px;
}
}
ul li {
padding-bottom: 10px;list-style:none;
}
}
ul li:before{
border-right: 2px solid black;
border-bottom: 2px solid black;
width: 10px;
height: 10px;
transform: rotate(-45deg);
content: "";
display: inline-block;
margin-right: 5px;
}
}
