How do I write div ids in their css-after-content-CodePudding

I’ve got another question I did not find in answer to. I am trying to display the id of each div in my site to visualize the nesting. This is my code so far:

    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>

    <body>
    <div id="frame">
        <div id="header">
            <div id="navigation"></div>
        </div>
        <div id="mainContent">
            <div id="sidebarLeft">
                <div id="calendar"></div>
            </div>
            <div id="article"></div>
            <div id="sidebarRight"></div>
        </div>
        <div id="footer">
            <div id="siteInfo"></div>
        </div>
        </div>
    </body>
    <style>
    #frame {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
#mainContent {
  flex: 1;
  background: blue;
}
#header {
  height: 64px;
  background: red;
  }
  #header::after{
      content:"#header";
      color: white;
      
  }
#footer {
  height: 64px;
  background: green;
}
    div[id]{border: 1px solid red;
    padding: 5px;}
</style>
</html>

How Could I use javascript here to write the divs id in the divs css-after-content of each div, like I did it per hand in the #header-div?

CodePudding user response：

Could just use css content: attr(id).

#frame {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
#mainContent {
  flex: 1;
  background: blue;
}
#header {
  height: 64px;
  background: red;
  }
  
  /*
  #header::after{
      content:"#header";
      color: white;
      
  }
  */
#footer {
  height: 64px;
  background: green;
}

/*
    div[id]{border: 1px solid red;
    padding: 5px;}
*/
    
/*REM: Show id*/
div[id]::after{
  background: lime;
  content: '#' '' attr(id);
  color: white
}

/*REM: Show class*/
div[class]:not(id)::after{
  background: aqua;
  content: '.' '' attr(class);
  color: white
}

<div id="frame">
    <div id="header">
        <div id="navigation"></div>
    </div>
    <div id="mainContent">
        <div id="sidebarLeft">
            <div id="calendar"></div>
        </div>
        <div id="article"></div>
        <div id="sidebarRight"></div>
    </div>
    <div id="footer">
        <div id="siteInfo"></div>
        <div ></div>
    </div>
</div>

CodePudding user response：

There is no direct way of doing this but there are two ways you can do this

using data attribute use data-my-id="header" at for css of the after element use content: attr(data-my-id)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div id="frame" data-my-id="frame">
      <div id="header" data-my-id="header">
        <div id="navigation" data-my-id="navigation"></div>
      </div>
      <div id="mainContent" data-my-id="mainContent">
        <div id="sidebarLeft" data-my-id="sidebarLeft">
          <div id="calendar" data-my-id="calendar"></div>
        </div>
        <div id="article" data-my-id="article"></div>
        <div id="sidebarRight" data-my-id="sidebarRight"></div>
      </div>
      <div id="footer" data-my-id="footer">
        <div id="siteInfo" data-my-id="siteInfo"></div>
      </div>
    </div>
  </body>
  <style>
    #frame {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    #mainContent {
      flex: 1;
      background: blue;
    }
    #header {
      height: 64px;
      background: red;
    }
    /* #header::after {
      content: "#header";
      color: white;
    } */
    #footer {
      height: 64px;
      background: green;
    }
    div[id] {
      border: 1px solid red;
      padding: 5px;
    }

    div[id]::after {
      content: attr(data-my-id);
      background-color: white;
      color: black;
      font-family: Arial, Helvetica, sans-serif;
      padding: 2px 4px;
      border: 1px solid black;
      display: inline-block;
      width: max-content;
    }
  </style>
</html>