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?
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.
unordered lists (<ul>) - the list items are marked with bullets.
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!
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With