Question

我创建了一个箭头，我想附加到列表而不是圆形的子弹点。我试图使用：之后但尚未取得成功，不得不承认我对伪元素很新......

这是我到目前为止所得到的：

＆＃13;

#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;
}

＆＃13;

<!-- 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>

＆＃13;

有任何想法的人吗？

Answer 1

将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);
}

请看下面的代码段：

#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>

希望这有帮助！

Answer 2

不直接回答所问的问题，但希望对像我一样通过搜索发现此问题的某些人有用！

使用与其他答案大致相同的想法，但使用更简单的::before伪元素，您可以将任何unicode箭头字符用作子弹，而不必在div上弄乱边框：

ul {
  position: relative;
  list-style: none;
}

li::before {
  content: '▶';
  position: absolute;
  left: 0;
}

这是unicode箭头的列表，因此您可以找到自己喜欢的东西：http://xahlee.info/comp/unicode_arrows.html

Answer 3

更现代（2021 年）的方法是：

注意：居中和颜色是可选的。

ul {
  list-style-type: none
}

li {
  display: grid;
  grid-template-columns: 20px auto;
  justify-content: start;
  align-items: center;
}

li::before {
  content: ">";
  font-size: 10px;
  color: #999;
}

<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

Answer 4

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;

}

带箭头的样式子弹列表

4 个答案: