CODEWITHSUNDEEP
htmlcssflexbox
Dastan Zhamekeshev
Dastan Zhamekeshev

Reputation: 67

List-item with display: flex; and <span> tag

I have a list item with display: flex; property. The problem is that according to standard behaviour <span> tag will be considered as a flex-element. That is why span tag stands out. But I need it to be the part of the text or something like this.

How can I make my span bold without these ugly consequences?

<li class="list__item"><span class="list__item-span">THIS TEXT WILL BE BOLD</span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus laborum rem est vitae inventore, dolorem incidunt voluptate velit impedit odit illum. Placeat dolores, doloribus alias delectus atque debitis? Explicabo, maxime!</li>

        .list__item {
            display: flex;
            align-items: flex-start;
            &::before {
                content: url("../images/check-mark.png"); /*link to the image (https://imgur.com/3XNSHMy) */
                margin-right: 20px;
            }
            &-span {
               font-weight: bold;
            }
        }

Upvotes: 1

Views: 278

Answers (2)

S. Hesam
S. Hesam

Reputation: 6603

<li class="list__item"><span><span class="bold">THIS TEXT WILL BE BOLD</span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus laborum rem est vitae inventore, dolorem incidunt voluptate velit impedit odit illum. Placeat dolores, doloribus alias delectus atque debitis? Explicabo, maxime!</span></li>

        .list__item {
            display: flex;
            align-items: flex-start;
            &::before {
                content: url("../images/check-mark.png"); /*link to the image (https://imgur.com/3XNSHMy) */
                margin-right: 20px;
            }
          
        }
        .bold{
           font-weight: bold;
          }

Upvotes: 1

Zia Ahmad
Zia Ahmad

Reputation: 190

Wrap the text and span element inside a paragraph.

   <li class="list__item"><p><span class="list__item-span">THIS TEXT WILL BE BOLD</span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus laborum rem est vitae inventore, dolorem incidunt voluptate velit impedit odit illum. Placeat dolores, doloribus alias delectus atque debitis? Explicabo, maxime!</p></li>

This will fix the issue but not sure if thats how u wanted it to be done.

Upvotes: 0

Related Questions