标题右边填充不能按预期工作

Question

我根据以下设计创建了一个网站：

如您所见，主标题背后有浅蓝色背景。到目前为止，我已经使用'padding-right'来实现这种广泛的背景效果，并且在类上使用了background属性但是它搞砸了，只有文本被浅蓝色背景覆盖。没有那种广泛的背景效应。我尝试将班级转换为每个标题的ID（＃title1，＃title2等等），但整条线都填充了浅蓝色背景，我需要更短的时间。

这是HTML：

<p dir="rtl"><span class="bluetitle"><span style="background-color:#dff2f6">headline<font color="#dff2f6">.</font></span></span><span style="font-family: Heebo, sans-serif; font-size: 1.938em; font-weight: 600;"></span></p>

这是CSS：

@media (min-width: 1920px) {
#title1{
padding-right: 27.5% !important;
background-color: #dff2f;
}
}
@media (min-width: 1920px) {
#title2{
padding-right: 21.3% !important;}
}
@media (min-width: 1920px) {
#title3{
padding-right: 37.2% !important;}
}
@media (min-width: 1920px) {
#title4{
padding-right: 23.75% !important;}
}
@media (min-width: 1920px) {
#title5{
padding-right: 26.3% !important;
}}

现在我无法让浅蓝色背景看起来与设计完全一样。在此之前，我给了#bluetitle的所有跨度，并给了他们相同的边距右单位，但他们没有根据设计对齐。我也尝试将所有标题对齐到左边然后我没有得到这么长的蓝色背景线，但看起来背景与这里的高度不一样：

如果你想检查网站，你可以在这里找到它：www.mayabarber.co.il

任何人都可以告诉我如何从设计中获得同样的效果？

谢谢！

Answer 1

你试图这样做的方式有点笨拙。我为您创建了一个更简单，更灵活的解决方案，以便您了解它应该如何工作：

首先，我把标题放在段落附近作为兄弟姐妹。接下来，我将:before伪添加到负责持续背景的标题中。这样您就不必担心标题的大小。背景将适应标题：

body{
  direction: rtl
}
h2 {
  background-color: #dff2f6;
  color: #001a71;
  display: inline-block;
  position: relative;
  animation: do-the-weird-padding-thingy ease infinite 5s;
}

h2:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #dff2f6;
  width: 100vw;
  left: 100%;
}

.container {
  max-width: 90%;
  width: 600px;
  margin: auto;
  animation: show-how-amazingly-flexible-cool-thingy-it-is ease infinite 10s
}

@keyframes show-how-amazingly-flexible-cool-thingy-it-is {
  0% { width: 600px }
  50% { width: 400px }
  100% { width: 600px }
}

@keyframes do-the-weird-padding-thingy {
  0% { padding: 0 }
  50% { padding: 30px 0 }
  100% { padding: 0 }
}

<div class="container">
  <div>
    <h2>This is just a headline</h3>
  </div>
  
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>