a::after 100% 宽度比

Question

我一直在思考如何让 ::after 填充锚点内可用的 space。

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 1

你的意思是这样吗？

.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;
}