Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Style bullet-list with arrows

Tags:

css

list

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?

like image 860
Lavonen Avatar asked Oct 18 '17 04:10

Lavonen


People also ask

How would you display a list item with a different bullet?

To create unordered list in HTML, use the <ul> tag. The unordered list starts with the <ul> tag. The list item starts with the <li> tag and will be marked as disc, square, circle, etc. The default is bullets, which is small black circles.

Which list styles are marked with the bullets?

unordered lists (<ul>) - the list items are marked with bullets.


2 Answers

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!

like image 153
Saurav Rastogi Avatar answered Sep 28 '22 11:09

Saurav Rastogi


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

like image 22
Jamie Humphries Avatar answered Sep 28 '22 11:09

Jamie Humphries