Style bullet-list with arrows

问题:

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

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?

回答1:

Use content: '' with pseudo elements (:before or :after). And use list-style: none for ul to remove the bullets. Like:

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!

回答2:

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 ::before pseudo-element, you can use any unicode arrow character for your bullet rather than messing about with borders on divs:

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

回答3:

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;

}