0

Given a HTML list like 

<h1>Agenda</h1>
<ol id="agenda">
    <li>First Topic</li>
    <li>Second Topic</li>
    <li>Third Topic</li>
    <li>Fourth Topic</li>
    <li>Fifth Topic</li>
</ol>

I try to style it like this image

styled list items having box and triangle

But I don't know how to format the items having a triangle on the right side.

I do have 

html {
    font-size:62.5%
}

body {
    font-size:4rem;
    font-weight:normal;
    counter-reset:agenda
}

ol {
    list-style-position:inside;
    list-style-type:none;
    padding-left:3rem
}

ol li {
    margin:0.75rem 0;
    vertical-align:middle
}

ol#agenda li::before {
    counter-increment:agenda;
    content:counter(agenda);
    background-color:#58595b;
    color:#fff;
    padding:0.5rem 1rem;
    margin-right:3rem
}

This gives me a box around the counter but misses the triangle. I thought about adding a background-image, but that must be stylable with a color and responsive so when I change the font size the list items must scale as well.

How can I add the triangle? Or is there another solution for that?

Thanks in advance

update

I don't want to style a div or span directly. I want to style the list items of a ordered or unordered list. I know that one can add a triangle using pseudo elements ::before and ::after. But that is not suitable for me because in all solutions I found the elements are style having 

before {
  content: '';
  width: 0;
  height: 0;
}

But as I want to add content (the numbers of the counter) I can't do that trick to get the arrow triangle.

  • I don't think that this question is a duplicate of https://stackoverflow.com/questions/16180107/arrow-box-with-css because I want to style the list items and not a div or span element. –  Dec 18 '17 at 13:37
  • you'll still need to use something similar to the answer this is being marked as duplicate. You can style the `:before` and the `:after` elements separately. See [this fiddle](https://jsfiddle.net/w07d1njy/) as an example. – tim_stuff Dec 18 '17 at 14:25
  • Thanks @tim_stuff, that's why I asked this question. I would never have got the idea to use ::before to style the numbers and ::after to add the triangle. Very hard to get that responsive I think. But I'll try it. Thanks for that. –  Dec 18 '17 at 14:44
  • you'll just have to make sure to resize your triangle every time you resize the boxes or the text that fill it. – tim_stuff Dec 18 '17 at 15:45

0 Answers0