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元素，您可以使用渐变来简化：

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

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

如果你不能在这里改变HTML是另一种方式，但没有透明度：

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

<h2>Some text</h2>