Question

我正在学习CSS（有很多乐趣！）并且想知道是否有人有替代解决方案。

我想为一个背后有功能区的网站拥有一个动态标题。所以无论标题文本的长度如何，它后面的功能区都会“调整大小”。我的解决方案是在文本的顶部叠加文本的背景容器。当文本容器调整大小时，由于白色背景，它看起来像它后面的功能区增长/缩小。

Below is the code我的解决方案是一个带有功能区的动态标题。

HTML

<div class="body">
  <div class="title_rule_wrap">
    <div class="title_rule">
      <h1>This is a title</h1>
    </div>
  </div>
</div>

CSS

.title_rule_wrap {
  text-align: center;
  width: 600px;
  height: 0;
  margin: 30px 0 20px;
  border-bottom: 7px solid green;
}

.title_rule {
  background-color: #fff;
  top: -2.2em;
  position: relative;
  display: inline-block;
  padding: 0 10px;
}

.body {
  width: 600px;
  margin: 0 auto;
}

上面的解决方案只使用一个h1标签和psuedo元素是否可行？ Here is what I have so far替代解决方案。

提前感谢您的帮助。欢呼声。

Answer 1

CSS：

h1 {
  text-align: center;
  background-color: #fff;
  margin:0 0 0 0;
  padding:0;
}
h1:before {
  content: "";
  position:relative;
  top:-3px;
  display: block;
  border: 3px solid green;
}
h1:after {
  content: "";
  position:relative;
  top:5px;
  display: block;
  border: 3px solid green;
}

这会在h1之前和之后放置绿色边框，并根据浏览器的宽度和高度调整大小，因为其位置设置为相对。

Answer 2

虽然我不认为这是一个很好的解决方案（我认为你已经拥有的可能更好 - :before和:after的宽度是棘手的部分），这是只有这样我才能实现你的要求。

好的一面是响应！

h1 {
  display:flex;
  align-items:center;
  justify-content:center;
}
h1:after, h1:before {
  content: "";
  background:green;
  width:33%;
  height:6px;
  margin:0 10px;
}

CodePen

以下是使用display:inline-block;代替flex

的其他变体

h1 {
  width:100%;
  display:inline-block;
}
h1:after, h1:before {
  content: "";
  background:green;
  width:33%;
  height:6px;
  margin:0 10px;
  display:inline-block;
  vertical-align:middle;
}

如何使用伪元素创建一个带有边框功能区的标题？

2 个答案: