Style Bullet-List with Arrows

Style bullet-list with arrows

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>

Unordered list with arrows for some elements

CSS has the ::marker pseudo element for this, which is widely supported except in any version of Internet Explorer.

.arrow::marker {
  content: "⇾";
}

<ul>
  <li>First
  <li>Second
  <li class="arrow">Third
  <li>Fourth
  <li class="arrow">Fifth
</ul>

How to get Arrow marks instead of bullets in html menus

I suppose this may be helpful: http://www.chami.com/tips/internet/050798i.html
so "→" is a "&" + "rarr;"

How do I create a Unordered list in html with sub arrows?

Yup. Use CSS, list-style-image.

http://www.w3schools.com/cssref/pr_list-style-image.asp

How to replicate special characters in html ?

Just re-create the special character to a png/jpeg image (png is preferred due to transparent bg) and replace the bullets with the image using list-style-image like this:

HTML:

<ul class="abcd">
    <li>Some text here</li>
    <li>Some more text here</li>
    <li>Some more random text here</li>
</ul>

CSS:

ul.abcd {
    list-style-image: url(‘/path-to-the-image-file/arrow.png’);
}

Also, You can adjust the image dimensions accordingly.

HTML list-style-type dash

You could use :before and content: bearing in mind that this is not supported in IE 7 or below. If you're OK with that then this is your best solution. See the Can I Use or QuirksMode CSS compatibility tables for full details.

A slightly nastier solution that should work in older browsers is to use an image for the bullet point and just make the image look like a dash. See the W3C list-style-image page for examples.

Increase size of list-style-bullet type

Might not work in old version of IE.

li:before{ content:'\00b7'; font-size:100px; }

Demo

For IE6:

Without javascript or images, I would recommend putting a <span>·</span> in the beginning of every list item and styling that.

Align bullet points to the right instead of left

try this

DEMO

MARK UP:

<div dir="rtl">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">Jewel Thieves</a></li>
<li><a href="#contact">Community</a></li>
</ul>
</div>

---

Related Topics