Calc 100％应用于div，而不是h2

Question

我试图在h2下创建黄色阴影，如下所示：

然而，我得到的是：

我看到源代码使用calc 100％来获取宽度：after after。

ul li a h3:after {
width: calc(100% + 30px);
display: block;
content: '';
background: #fbf36d;
margin-top: -0.7rem;
margin-left: -10px;
height: 0.8rem;
position: absolute;
z-index: -1;
transition: all 0.3s ease-out;

}

以下是我的代码段。

＆＃13;

＆＃13;

.thing h2 {
  position: relative;
}

.thing h2:after {
  content: "";
  width: 100%;
  background: #fbf36d;
  margin-top:-0.7rem;
  margin-left: 5px;
  height: 0.8rem;
  position: absolute;
  z-index: -1;
  transition: all 0.3s ease-out;
  display: block;
}

＆＃13;

  <div class="thing">
    <h2>Here is the title</h2>
    <p>I just don't get it, why the 100% width is applied to the div, instead of h2. Amazing.</p>
  </div>

＆＃13;

＆＃13;

＆＃13;

据说我错过了什么。有什么想法吗？

Answer 1

我认为你所指的问题是h2当前显示为其容器（div）的100％宽度。尝试将h2设置为display: inline-block;。这应该可以解决您的问题。

Answer 2

您需要将h2作为内联块。 h2通常与div相同 - 这意味着它是100％宽。

如果你使它成为内联块，它只需要它所需的宽度。

＆＃13;

＆＃13;

[loggers]
keys=root

[handlers]
keys=rootHandler,fullHandler,errorHandler

[formatters]
keys=simpleFormatter

[logger_root]
level=NOTSET
handlers=rootHandler,fullHandler,errorHandler

##### TERMINAL HANDLER #####
# Setup for output to terminal
# level=DEBUG : Logging ALL messages

[handler_rootHandler]
class=logging.StreamHandler
level=DEBUG
formatter=simpleFormatter
args=tuple()

##### STDOUT HANDLER #####
# Setup for output to stdout.log file
# level=DEBUG : Logging ALL messages
# arg=2097152 : RotatingFileHandler with 2097152 Bytes (2 MB) max size
# arg=3 : RotatingFileHandler with 3 backup files

[handler_fullHandler]
class=logging.handlers.RotatingFileHandler
level=DEBUG
formatter=simpleFormatter
args=('stdout.log','w',2097152,3)

##### STDERR HANDLER #####
# Setup for output to stderr.log file
# level=WARNING : Logging WARNING,ERROR and EXCEPTION messages
# arg=2097152 : RotatingFileHandler with 2097152 Bytes (2 MB) max size
# arg=3 : RotatingFileHandler with 3 backup files

[handler_errorHandler]
class=logging.handlers.RotatingFileHandler
level=WARNING
formatter=simpleFormatter
args=('stderr.log','w',2097152,3)

##### APPEARANCE #####
# Setup for formatting of log message
# e.g. [2017-12-13 16:00:50.983] DEBUG :: ext_module : DEBUG MESSAGE
# e.g. [2017-12-13 16:00:50.983] INFO :: ext_module : INFO MESSAGE
# e.g. [2017-12-13 16:00:50.983] WARNING :: ext_module : WARNING MESSAGE
# e.g. [2017-12-13 16:00:50.983] ERROR :: ext_module : ERROR MESSAGE
# e.g. [2017-12-13 16:00:50.983] ERROR :: ext_module : EXCEPTION MESSAGE

[formatter_simpleFormatter]
format=[%(asctime)s.%(msecs)03d] %(levelname)s :: %(module)s : %(message)s
datefmt=%Y-%m-%d %H:%M:%S

＆＃13;

.thing h2 {
  position: relative;
  display:inline-block;
}

.thing h2:after {
  content: "";
  width: 100%;
  background: #fbf36d;
  margin-top:-0.7rem;
  margin-left: 5px;
  height: 0.8rem;
  position: absolute;
  z-index: -1;
  transition: all 0.3s ease-out;
  display: block;
}

＆＃13;

＆＃13;

＆＃13;