我创建了一个箭头，我想将其附加到列表而不是圆形项目符号点。我尝试过使用 :after 但还没有成功，不得不承认我对伪元素非常陌生......
这是我到目前为止得到的：
#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>
有人有什么想法吗？
Use content: ''与伪元素（:before or :after）。并使用list-style: none for 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);
}
看看下面的片段：
#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>
希望这可以帮助！
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
