Is there any way to change the div content by CSS, I want to replace div text by the nth-child method in CSS, I tried

.member-info .mb-meta span:nth-child(1) {
  display: none;
}

.member-info .mb-meta span:nth-child(1):after {
  content: 'Speciality123';
}

.member-info .mb-meta span:nth-child(2) {
  display: none;
}

.member-info .mb-meta span:nth-child(2):after {
  content: 'Designation123';
}

<div class="member-info">
  <h3>sometext</h3>
  <div class="mb-meta">
    <span>Speciality: </span>
  </div>
  <div class="mb-meta">
    <span>Designation: </span>
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

something like that ?

.member-info .mb-meta span:nth-child(1) {
  display: none;
}

.member-info .mb-meta:nth-child(2):after {
  content: 'Speciality123';
}

.member-info .mb-meta span:nth-child(2) {
  display: none;
}

.member-info .mb-meta:nth-child(3):after {
  content: 'Designation123';
}

<div class="member-info">
  <h3>sometext</h3>
  <div class="mb-meta">
    <span>Speciality: </span>
  </div>
  <div class="mb-meta">
    <span>Designation: </span>
  </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>