0

I wanna show index number before every li as content of before:: psudo element. But tailwind pseudo class before:: content not showing correctly?

(I use postcss for tailwind)

Heres this project git repo link.

Heres my nav component,

import React from "react";
import navData from "../data/navData.js";
class Nav extends React.Component {
  render() {
    let { brand } = navData;
    let items = [];
    for (const item in navData) {
      items.push(navData[item]);
    }
    return (
      <nav className="flex justify-between h-[clamp(0px,10vw,100px)] bg-base_color/75  items-center backdrop-blur-sm sticky top-0 text text-white_like">
        <span className="ml-8">{brand}</span>
        <ul className=" w-2/5 flex justify-between mr-8">
          {items.slice(1).map((a, index) => {
            return (
              <li className={`before:content-['${index}']`} key={Math.random()}>
                {a}
              </li>
            );
          })}
        </ul>
      </nav>
    );
  }
}
export default Nav;

Here is my navData from another file-folder,

const navData = {
  brand: "Mohiul Islam",
  item1: "about",
  item2: "experience",
  item3: "work",
  item4: "contact",
};
export default navData;
krishnaacharyaa
  • 14,953
  • 4
  • 49
  • 88
Mohiul Islam
  • 49
  • 8
  • Please read [how to ask](https://stackoverflow.com/help/how-to-ask) and edit your question to make it appropriate for Stackoverflow. What does "not working" mean? Be specific about what you expect to happen, what is actually happening, and how that isn't meeting your expectations. – Andy Ray Jan 05 '23 at 05:45
  • I edited. Please take a look now @AndyRay . – Mohiul Islam Jan 05 '23 at 05:57

2 Answers2

1

Tailwind suggests using attr()

Referencing an attribute value

These content utilities even support CSS features like the attr() function, which you can use to reference a value stored in an attribute:

Like:

<div before="Hello World" class="before:content-[attr(before)]">
  <!-- ... -->
</div>

Change your code to :

{items.slice(1).map((a, index) => {
   return (
      <li before={${index}} className="before:content-[attr(before)]" key={Math.random()}>
         {a}
      </li>
    );
}

Or

{items.slice(1).map((a, index) => {
   return (
      <li className=`before:content-[attr(${index})]` key={Math.random()}>
         {a}
      </li>
    );
}
krishnaacharyaa
  • 14,953
  • 4
  • 49
  • 88
  • Not like that .Wanna show index number before every li as content of before:: psudo element. Something like **className="before:content-['index']"**. – Mohiul Islam Jan 05 '23 at 06:14
  • You are specifically looking to do it using before: pseudo class ? I just gave you work around to work with meanwhile – krishnaacharyaa Jan 05 '23 at 06:15
  • It's worked, but not straight-cut prosess. Taking a extra attribute to do this is excess. Any other solution? (Syntax errore: Edit your answer before={`${index}`} ) – Mohiul Islam Jan 05 '23 at 06:49
  • try my edit. Please correct the syntax if there are any errors. I am trying to give the conceptual view of it – krishnaacharyaa Jan 05 '23 at 06:52
  • Lsat solution not working at all even after correcting syntax errore `className={`\``before:content-[attr(${index})]`\``}` – Mohiul Islam Jan 05 '23 at 07:37
1

CSS has its own counters for that purpose

Add [counter-reset:els] to an ul element and before:[counter-increment:els] before:content-[counter(els)] for every li

<ul className="[counter-reset:els] w-2/5 flex justify-between mr-8">
   {items.slice(1).map((a, index) => {
      return (
        <li className="before:[counter-increment:els] before:content-[counter(els)]" key={Math.random()}
            {a}                 
         </li>
      );
    })}
 </ul>

DEMO

Ihar Aliakseyenka
  • 9,587
  • 4
  • 28
  • 38