Question

我遇到了一个solution here，但由于两个原因，它并不是我所需要的：

我不知道如何使线条的宽度更短。
该解决方案定义了H2，我已经在网站上的当前css中定义了h2。我更喜欢一个独特的css类作为定义，因此它不会发生冲突。以下图片显示了我想要实现的目标。基本上，h2文本用斜体+两条较短的水平线，两侧居中，如Lines with text in the middle

我会感激任何帮助。我将在Wordpress中使用代码谢谢。

Answer 1

这是唯一类line的示例，因此您可以将该类应用于任何元素，并且您将在两侧都有行。您还可以更改line:after和line:before

上的行宽

.parent {
  text-align: center;
}

.line {
  font-size: 30px;
  position: relative;
  display: inline-block;
  margin: 0;
}

.line:after, .line:before {
  content: '';
  width: 50px;
  position: absolute;
  top: 50%;
  height: 1px;
  background: black;
}

.line:before {
  left: 0;
  transform: translate(-120%, -50%);
}

.line:after {
  right: 0;
  transform: translate(120%, -50%);
}

<div class="parent">
  <p class="line">Lorem ipsum</p>
</div>

Answer 2

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">

<style>
    .line-center{
        margin:0;padding:0 10px;
        background:#fff;
        display:inline-block;
    }
    div{
        text-align:center;
        position:relative;
        z-index:2;
        width: 100px;

    }
    div:after{
        content:"";
        position:absolute;
        width: 100px;
        top:50%;
        left:0;
        right:0;
        border-top:solid 1px black;
        z-index:-1;
    }
</style>

</head>
<body>
<div>
    <span class="line-center">Test</span>
</div>



</body>

文本两侧的水平线短

2 个答案: