Using CSS to replace text dynamically

Question

In following HTML snippet, I am trying to modify the text dynamically using CSS.

<li id="onroad" class="onroad boxSizing" data-stageid="4" data-invalidot="1" data-desc="Heading your way">
                <span class="material-icons ui-state-default ui-state-active" aria-hidden="true"></span>
                <h4 class="text" role="none">On Road</h4>
                    <span class="line ui-state-default ui-state-active" aria-hidden="true"></span>
</li>

My CSS snippet is,

#trackerDiv>#trackerNav>ol#tracker.delivery li#onroad span.ui-state-active  h4 {visibility: hidden;}
#trackerDiv>#trackerNav>ol#tracker.delivery li#onroad span.ui-state-active h4:before {visibility: visible;position: absolute;content: "Complete";}

So my ask is without using JS/Jquery to dynamically change the text based on "ui-state-active" class presence. CSS looks alright but it ain't working.

If above CSS executes correctly, it should replace "On Road" to "Complete"

You cannot make the child elements visible if the host element has visibility: hidden. — connexo
– connexo, Commented Sep 14, 2021 at 20:10

connexo · Accepted Answer · 2021-09-15 06:46:57Z

3

Your CSS is incorrect, the h4 is not a child of the span it's a sibling so use +, like so

ul {
  list-style: none;
}

li#onroad span.ui-state-active+h4 {
  visibility: hidden;
}

li#onroad span.ui-state-active+h4:before {
  visibility: visible;
  content: "Complete";
}

<ul>
  <li id="onroad" class="onroad boxSizing" data-stageid="4" data-invalidot="1" data-desc="Heading your way">
    <span class="material-icons ui-state-default ui-state-active" aria-hidden="true"></span>
    <h4 class="text" role="none">On Road</h4>
    <span class="line ui-state-default ui-state-active" aria-hidden="true"></span>
</ul>

edited Sep 15, 2021 at 6:46

connexo

57.2k15 gold badges112 silver badges149 bronze badges

answered Sep 14, 2021 at 20:10

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using CSS to replace text dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related