CSS with :After :NTH-Child

Question

.app-btn {
  font-size: 0px !important;
}

.app-btn:after {
  content: '+2500';
  visibility: visible;
  font-size: 15px !important;
}

.app-btn:after:nth-child(1) {
  content: "+18000";
}

.app-btn:after:nth-child(2) {
  content: "+14000";
}

<div class="app" data-url="#">
  <button class="app-btn">CHANGE</button>
</div>

<div class="app" data-url="#">
  <button class="app-btn">CHANGE</button>
</div>

<div class="app" data-url="#">
  <button class="app-btn">CHANGE</button>
</div>

`::after` does not replace existing content. You need Javascript for that, or remove the pre-existing content "CHANGE". Next, you have the wrong order in your selector. Instead, use `.app-btn:nth-child(1)::after`. — connexo, Apr 27 '21 at 12:02

score 1 · Accepted Answer · answered Apr 27 '21 at 12:00

This is just a problem with the CSS selector being used. These don't match the buttons:

.app-btn:after:nth-child(1) { ... }
.app-btn:after:nth-child(2) { ... }

In fact, each button is a sole child of the parent div so that selector doesn't actually make sense.

Instead, use the nth-child on the parent div (or, potentially, nth-of-type) and then apply the style to the descendent app-btn:

.app:nth-child(1) > .app-btn:after { ... }
.app:nth-child(2) > .app-btn:after { ... }

The following snippet shows this in action:

.app > .app-btn {
  font-size: 0px !important;
}

.app > .app-btn:after {
  content: '+2500';
  visibility: visible;
  font-size: 15px !important;
}

.app:nth-child(1) > .app-btn:after {
  content: "+18000";
}

.app:nth-child(2) > .app-btn:after {
  content: "+14000";
}

<div class="app" data-url="#">
    <button class="app-btn">CHANGE</button>
</div>
<div class="app" data-url="#">
    <button class="app-btn">CHANGE</button>
</div>
<div class="app" data-url="#">
    <button class="app-btn">CHANGE</button>
</div>

CSS with :After :NTH-Child

1 Answers1