具有背景中心的CSS H2位置

Question

嗨，我的H2有此CSS代码

rightBox h2 {

background: url(images/lineh2.png) 0px 0px no-repeat;
border-top: 1px solid #e4e4e4;
margin-bottom: 15px;
font-size: 22px;
font-weight: 100;
font-family: "Segoe UI Semilight", Tahoma, Helvetica, Sans-Serif;
color: #00b4f0;
display: block;
padding: 10px 0px 0px 0px;

此标题行上方添加了40x5px，位置左移了0px，我想用text-align: center;将标题移到中心，但是我也希望该行显示在中心，但在左角显示这样的文字：

谢谢

Answer 1

您可以考虑在其中应用背景的span元素，可以使用渐变来简化背景：

int

h2 {
  font-size: 22px;
  font-family: "Segoe UI Semilight", Tahoma, Helvetica, Sans-Serif;
  color: #00b4f0;
  text-align:center;
  border-top: 1px solid #e4e4e4;
}
h2 span {
  padding: 10px 0px 0px 0px;
  display:inline-block;
  background:
    linear-gradient(currentColor,currentColor) top left/40px 5px no-repeat;
}

如果您无法更改HTML，这是另一种方法，但是没有透明度：

<h2><span>Some text</span></h2>

h2 {
  font-size: 22px;
  font-family: "Segoe UI Semilight", Tahoma, Helvetica, Sans-Serif;
  color: #00b4f0;
  display:flex;
  line-height:45px;
  border-top: 1px solid #e4e4e4;
  background:
    linear-gradient(currentColor,currentColor) top left/50% 5px no-repeat;
}
h2::before,
h2::after{
  content:"";
  flex-grow:1;
  background:#fff;
}