Bulma class: item__separator


<style>
        .price-list__item {
            margin: 5px;
            position: relative;
        }


        .price-item {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            margin-bottom: 10px;
        }


        .price-item__heading {
            -webkit-box-flex: 0;
            -webkit-flex: 0 1 auto;
            -ms-flex: 0 1 auto;
            flex: 0 1 auto;
            font-size: 14px;
            font-weight: 700;
            margin: 0;
            padding-top: 9px;
        }

        .price-item__separator {
            background-image: -webkit-radial-gradient(circle closest-side, rgb(0, 0, 0) 99%, transparent 1%);
            background-image: radial-gradient(circle closest-side, rgb(0, 0, 0) 99%, transparent 1%);
            background-position: bottom;
            background-size: 5px 3px;
            background-repeat: repeat-x;
            -webkit-box-flex: 1;
            -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            margin-left: 3px;
            margin-right: 5px;
            margin-bottom: calc((28px - 10px)/2);
        }

        .price-item__price {
            -webkit-box-flex: 0;
            -webkit-flex: 0 1 auto;
            -ms-flex: 0 1 auto;
            flex: 0 1 auto;
            font-size: 14px;
            font-weight: 700;
            color: rgb(0, 0, 0);
            text-align: right;
            margin: 0;
            line-height: 30px;
        }
</style>
	

<div class="column"> <ul class="price-list"> <li class="price-list__item"> <div class="price-item"> <h3 class="price-item__heading">1) </h3> <div class="price-item__separator"></div> <div class="price-item__price">1 €</div> </div> </li> </ul> </div>

Preview

  • 1)

    1 €
  • 2)

    2 €
  • 3)

    3 €