文本前后的行无响应 [英] Line before and after text not responsive

问题描述

我正在尝试在文本前后添加一行，但是我希望它能够响应，当前我唯一能找到的方法是使用宽度...因此它没有响应。

I am trying to have a line before and after my text but I want it to be responsive and currently the only way I can find is by using width... so its not responsive.

我宁愿只在伪元素之前和之后使用，但如果不可能，那么我会找到另一种方法。

I would prefer to use before and after psuedo elements only but if its not possible then I am find with another approach.

HTML：

<div class="section-header text-center">
  <h2>Testing</h2>
</div>

CSS：

.section-header {
  position: relative;
}

.section-header h2 {
  border: 2px solid rgba(0, 0, 0, 0.1);
  padding: 0.3em 0.8em;
  display: inline-block;
}

.section-header::before,
.section-header::after {
  border-top: 1px solid black;
  display: block;
  height: 1px;
  content: " ";
  width: 40%;
  position: absolute;
  left: 0;
  top: 1.2em;
  opacity: 0.1;
}

.section-header::after {
  right: 0;
  left: auto;
}

.text-center {
    text-align: center !important;
}

JSFiddle演示

JSFiddle Demo

推荐答案

一个简单的选择是对 section-header 使用 flexbox -然后您可以：

A simple option is to use a flexbox for section-header - then you can:

使用设置为 h2 margin 设置h2和行之间的空格 $ c>

• 将伪元素的宽度设置为100％-是 flex项目，它将适应可用空间

• set the space between the h2 and the lines using a margin set to the h2
• set the width of the pseudo elements as 100% - being a flex item, it will adapt to the space available

请参见以下演示：

.section-header {
  position: relative;
  display: flex; /* sets a flex container */
  align-items: center; /* aligns vertically */
}

.section-header h2 {
  border: 2px solid rgba(0, 0, 0, 0.1);
  padding: 0.3em 0.8em;
  display: inline-block;
  margin: 0 1em; /* space between h2 and line if needed */
}

.section-header::before,
.section-header::after {
  border-top: 1px solid black;
  display: block;
  height: 1px;
  content: " ";
  width: 100%; /* full-width ;)*/
  top: 1.2em;
  opacity: 0.1;
}

.text-center {
  text-align: center !important;
}

<div class="section-header text-center">
  <h2>Testing</h2>
</div>

这篇关于文本前后的行无响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！