将ID显示为CLASS的:after

Question

#fp-nav{display:none}
.submenu:after{content:"I WANT #fp-nav HERE"}

<div class="submenu"> </div>
<div id="fp-nav">01 / 52</div>

假设我有一个ID计数器，它会更新每个部分的更改：01/XX，02/XX等等…

如何在页面中隐藏该ID，并使其显示为CLASS的：after？

谢谢！

Answer 1

不确定我是否像epascarello所说的那样得到了你想要实现的目标，这还不清楚！

body{
    counter-reset: paragraph;
}
p::before {
  counter-increment: paragraph;                
  content: "Paragraph " counter(paragraph) ": ";
}

<p>Name</p>
<p>Last Name</p>
<p>Phone #</p>
<p>Address</p>

Answer 2

您可以通过styleSheets集合操作CSS规则的样式属性：

// Get the rule's stylesheet and index
let ruleIndex = -1;
let sheet = null;
let sheetRules = null;
Array.from(document.styleSheets).some(s => Array.from(s.rules || s.cssRules).some((rule, index) => {
  if (rule.selectorText == ".foo::after") {
    sheet = s;
    sheetRules = sheet.rules || sheet.cssRules;
    ruleIndex = index;
    return true;
  }
}));
// Update it periodically
let id = 0;
setInterval(() => {
  ++id;
  sheet.deleteRule(ruleIndex);
  ruleIndex = sheet.insertRule('.foo::after { content: "' + id + '"; }', ruleIndex);
}, 250);

.foo::after {
  content: 'foo';
}

<span class="foo"></span>

您过去可以更改规则的样式属性，但它们已变为只读，因此现在必须删除旧规则并添加新规则。

Answer 3

通过Jquery有一个解决方案，您可能无法针对伪类，如：after，但您可以将其添加到子菜单div标记中

//get value from the id
var k = $('#fp-nav').text();
// remove the element 
$('#fp-nav').remove();
//add the value inside submenu i just gave it a class value you can change it as per your need
$(".submenu").append( "<div class='idval'>"+k +"</div> ");