css content element not showed in if display=flex

Question

I have a line describing the full company address. It is made with different pieces

<div><b>COMPANY</b>&nbsp;•&nbsp;Address,&nbsp;City&nbsp;•&nbsp;VAT 12345678901</div>

In a large screen the div is displayed as one long line:

COMPANY • Address line, City • VAT 12345678901

But on a small mobile device it is displayed on three lines:

     COMPANY • 
Address line, City • 
  VAT 12345678901

My goal is to remove the bullets on the small devices. To accomplish the goal, I defined a span element as follow:

.bg99 .footer-divider {
    content: " • ";
}
@media only screen and (max-width: 768px){ 

    .bg99 div.company div {
        flex-direction: column;    
    }
    .bg99 .footer-divider {
        content: "  "
    }
    
  }

and changed the line as follow:

<div><b>COMPANY</b><span className="footer-divider"/>Address,&nbsp;City<span className="footer-divider"/>VAT 12345678901</div>

But the result is that the bullets disappeared on both devices.

Inspecting the browser, I see the CSS class footer-divider and the content

.bg99 .footer-divider {
    content: " • ";
}

But the bullets are not visible on the screen. It looks like the rule should not applied.

Any idea?

Answer 1

I think first you need to replace "className" with "class" in your html markup

Try below code that might help

HTML

<div class="bg99">
<b>COMPANY</b>
<span class="footer-divider">Address,&nbsp;City</span>
<span class="footer-divider">VAT 12345678901</span>
</div>

CSS

@media only screen and (max-width: 768px){

    .bg99 div.company div {
        flex-direction: column;    
    }
    
    .bg99 .footer-divider::before{
        content: "*"
    }
    
  }