Get css content to have the same width as parent div-CodePudding

I'm modifying css on a website where I cannot change the html markup. I'm trying to have a "tooltip" like box to display after a certain content, but:

1 - I don't want the below contents to shift, but to be covered so I'm using position:absolute

2 - Here's where I'm stuck. I'm trying to have the "tooltip" to have the same width as the div (the #main red div in this example), without having to set an amount of pixels / pixels per screen size.

Is there a way to do this?

#main {
  height:50px;
  width:200px;
  background-color:red;
  display:inline-block;
  /*needs to be inline-block*/
}
#secondary {
  height:50px;
  width:200px;
  background-color:yellow;
  display:inline-block;
}
#main:hover::after {
  content:"tips displayed";
  background-color:blue;
  position:absolute;
  display:block;
}

<div id="main">content</div>
<div id="secondary">content</div>

CodePudding user response：

Use left: 0; right: 0; for the ::after element. Note the position: relative in the #main and #secondary element to be sure it works fine in the flow of your html structure.

#main {
  height:50px;
  width:200px;
  background-color:red;
  display:inline-block;
  position:relative;
}
#secondary {
  height:50px;
  width:200px;
  background-color:yellow;
  display:inline-block;
  position:relative;
}
#main:hover::after,
#secondary:hover::after {
  content:"tips displayed";
  background-color:blue;
  position:absolute;
  left:0;
  right:0;
  display:block;
}

<div id="main">content</div>
<div id="secondary">content</div>

CodePudding user response：

You can specify the width of the child as inherit. Width: inherit;