tag with flex, custom bullet icon and bold text

Question

Everything seems to be working but as soon as I create bold text either with <strong> or <span> inside the <li> tag - it ignores the space that should have been between words because I'm using flex.

I have tried every possible justify-content on the <li> tag and didn't come up with a solution to this.

HTML:

<div class="bullets">
    <ul>
        <li><strong>100X</strong> More Powerful</li>
        <li>Say <strong>No</strong> To Plastic</li>
        <li>Fits <strong>99.9%</strong> On The Market</li>
        <li>Saves Approximately <strong>8 Hours A Year</strong></li>
        <li>Durable Like <strong>$3,000</strong> Worth</li>
    </ul>
</div>

CSS:

.bullets {
    display: flex;
    flex-flow: column wrap;
    font-size: 18px;
    
    ul {
       list-style: none;

       li {
        display: flex;
        align-items: center;
        padding-left: 16px;
       }

       li:not(:first-of-type) {
        margin-top: 15px;
       }

       li:before {
        content: "";
        background-image: url('https://cdn.shopify.com/s/files/1/0493/4605/2261/files/checkmark.svg?v=1600908500');
        background-size: 24px 21px;
        margin-left: -16px;
        width: 24px;
        height: 21px;
        margin-right: 10px;
       }
    }
}

https://jsfiddle.net/z2r6j4ts/

add a margin or padding to include a gap https://jsfiddle.net/8txe3p4o/ or a gap https://jsfiddle.net/8txe3p4o/1/ — G-Cyrillus, Nov 28 '20 at 15:17
@G-Cyrillus other answers suggesting to add margin didn't quite work because it also added margin-left if text was at the beginning of the sentence. `gap` though, worked as planned. Thanks! — Ricardo, Nov 28 '20 at 15:23

score 0 · Answer 1 · answered Nov 28 '20 at 15:16

0

Add these line to your CSS code:

li > strong{ margin: 0 2px; }

answered Nov 28 '20 at 15:16

adampweb

1,135
1
9
19

score 0 · Answer 2 · answered Nov 28 '20 at 15:17

0

You can add the following code to make spacing work:

li {
    strong {
      margin: 0 .25rem;
    }
}

answered Nov 28 '20 at 15:17

Emanuele Scarabattoli

4,103
1
12
21

G-Cyrillus · Accepted Answer · 2020-11-28T16:05:54.483

You may use a gap

.bullets {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-flow: column wrap;
  font-size: 18px;
}

.bullets ul {
  list-style: none;
}

.bullets ul li {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  padding-left: 16px;
  gap: 0.25em;
}

.bullets ul li:not(:first-of-type) {
  margin-top: 15px;
}

.bullets ul li:before {
  content: "";
  background-image: url("https://cdn.shopify.com/s/files/1/0493/4605/2261/files/checkmark.svg?v=1600908500");
  background-size: 24px 21px;
  margin-left: -16px;
  width: 24px;
  height: 21px;
  margin-right: 10px;
}

<div class="bullets">
  <ul>
    <li><strong>100X</strong> More Powerful</li>
    <li>Say <strong>No</strong> To Plastic</li>
    <li>Fits <strong>99.9%</strong> On The Market</li>
    <li>Saves Approximately <strong>8 Hours A Year</strong></li>
    <li>Durable Like <strong>$3,000</strong> Worth</li>
  </ul>
</div>

edit

examples from below comments :

flex-wrap/white-space

.bullets {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-flow: column wrap;
  font-size: 18px;
}

.bullets ul {
  list-style: none;
}

.bullets ul li {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-align: center;
  align-items: center;
  padding-left: 16px;
  gap: 0.25em;
  white-space: nowrap;
}

.bullets ul li:not(:first-of-type) {
  margin-top: 15px;
}

.bullets ul li:before {
  content: "";
  background-image: url("https://cdn.shopify.com/s/files/1/0493/4605/2261/files/checkmark.svg?v=1600908500");
  background-size: 24px 21px;
  margin-left: -16px;
  width: 24px;
  height: 21px;
  margin-right: 10px;
}

<div class="bullets">
  <ul>
    <li><strong>100X</strong> More Powerful</li>
    <li>Say <strong>No</strong> To Plastic</li>
    <li>Fits <strong>99.9%</strong> On The Market</li>
    <li>Saves Approximately <strong>8 Hours A Year </strong>8 Hours A Year 8 Hours A Year 8 Hours A Year</li>
    <li>Durable Like <strong>$3,000</strong> Worth</li>
  </ul>
</div>

flex-wrap only

.bullets {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-flow: column wrap;
  font-size: 18px;
}

.bullets ul {
  list-style: none;
}

.bullets ul li {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-align: center;
  align-items: center;
  padding-left: 16px;
  gap: 0.25em;

}

.bullets ul li:not(:first-of-type) {
  margin-top: 15px;
}

.bullets ul li:before {
  content: "";
  background-image: url("https://cdn.shopify.com/s/files/1/0493/4605/2261/files/checkmark.svg?v=1600908500");
  background-size: 24px 21px;
  margin-left: -16px;
  width: 24px;
  height: 21px;
  margin-right: 10px;
}

<div class="bullets">
  <ul>
    <li><strong>100X</strong> More Powerful</li>
    <li>Say <strong>No</strong> To Plastic</li>
    <li>Fits <strong>99.9%</strong> On The Market</li>
    <li>Saves Approximately <strong>8 Hours A Year </strong>8 Hours A Year 8 Hours A Year 8 Hours A Year</li>
    <li>Durable Like <strong>$3,000</strong> Worth</li>
  </ul>
</div>

This works but it looks terrible when I'm trying to scale down to smaller devices so the sentence breaks into a new line but everything inside behaves as a separate div. Any suggestions for that? — Ricardo, Nov 28 '20 at 15:27
suggestion would be to allow flex-wrap and use white-space : https://jsfiddle.net/zrL17gtp/ — G-Cyrillus, Nov 28 '20 at 15:31
white-space actually is optionnal : https://jsfiddle.net/kvLaobhd/ see what you like best in between. — G-Cyrillus, Nov 28 '20 at 15:40
Looks better but it still breaks off lines https://i.imgur.com/4WhkULt.png I assume making it 100% inline is not possible using this
flexbox trick? — Ricardo, Nov 28 '20 at 15:43
unfortunately, a flex child cannot break into 2 lines . Same probleme as here https://stackoverflow.com/questions/65048582/display-inline-flex-and-flex-wrapwrap-doesn-t-fill-previous-line-of-text/65050345#65050345 , where words are each wrapped into a single tag to break through lines . — G-Cyrillus, Nov 28 '20 at 16:08
Got it. Just removed
completely and rewrote everything into flexbox divs. Thanks again. — Ricardo, Nov 28 '20 at 16:19

tag with flex, custom bullet icon and bold text

3 Answers3