伪元素宽度等于父元素文本之前

Question

我遇到了一个问题，我正在使用Wordpress，并且想为我的用户初始化所有<h1>, <h2>, <p>, <ul> etc ...标签。 这意味着我无法更改HTML模板，只能使用CSS。 我想做的是：

我现在有这个：

h2 {
    font-size: 24px;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 30px;
    padding-left: 30px;
    color: #fff;
}
h2:after {
    content: "";
    background-color: #1c3b65;
    width: 100%;
    height: 120%;
    position: absolute;
    top: -10%;
    left: 0;
    z-index: -1;
    -webkit-transform: skew(-10deg);
    -moz-transform: skew(-10deg);
    -o-transform: skew(-10deg);
    -ms-transform: skew(-10deg);
    tranform: skew(-10deg);
}

<h2> Titre de niveau 2 </h2>

我知道我可以在标签上加上宽度：适合内容，但用户将无法居中，并使用Wordpress的“所见即所得”在左侧或右侧放置文本。 而且，如果我将width：100％放在前一个伪元素上，它将占据所有行，这是逻辑上的，因为该标记将所有行用于使文本对齐CSS属性有效。

我想要什么：

h2 {
    font-size: 24px;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 30px;
    padding-left: 30px;
    color: #fff;
    width: fit-content;
}
h2:after {
    content: "";
    background-color: #1c3b65;
    width: 110%;
    height: 120%;
    position: absolute;
    top: -10%;
    left: 0;
    z-index: -1;
    -webkit-transform: skew(-10deg);
    -moz-transform: skew(-10deg);
    -o-transform: skew(-10deg);
    -ms-transform: skew(-10deg);
    tranform: skew(-10deg);
}

<h2> Titre de niveau 2 </h2>

Answer 1

您可以仅在display: inline-block元素上使用h2并将其与left: 50%和translate居中。

h2 {
  font-size: 24px;
  text-transform: uppercase;
  position: relative;
  margin-bottom: 30px;
  padding: 0 30px;
  color: #fff;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}

h2:after {
  content: "";
  background-color: #1c3b65;
  width: 100%;
  height: 120%;
  position: absolute;
  top: -10%;
  left: 0;
  z-index: -1;
  transform: skew(-10deg);
}

<h2> Titre de niveau 2 </h2>