Shawn Rieger Shawn Rieger -4 years ago 56
CSS Question

a::after at 100% width is much larger than a

I'm stuck figuring out how I can get ::after to fill the available space inside an anchor.

https://jsfiddle.net/riegersn/g5vhaxa8/

.nsfw::after {
content: "NSFW";
text-align: center;
vertical-align: middle;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 5px;
position: absolute;
color: #fff;
background-color: #c42c00;
display: block;
}

Answer Source

you mean like so ?

.nsfw {
   position:relative;
}

.nsfw::after {
  content: "NSFW";
  text-align: center;
  vertical-align: middle;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  top:0;
  left:0;
  margin: 5px;
  position: absolute;
  color: #fff;
  background-color: #c42c00;
  display: block;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download