前/后左/后/右文本

Question

我有h3并希望在DAY-BY-DAY字之前/之后和之后有一行，但只能在:: after和::之前在该字的顶部和底部实现一行。如何通过flex实现这一点，请帮忙。

类似于---- DAY-BY-DAY ----

这是html：

<h3 id ="daybyday"><span style="font-style: italic; font-size: 23px; color: #7B7B7A;">DAY-BY-DAY</span><`/h3>`

这是CSS：

#daybyday::before {
             content: "";
             display: block;
             background: salmon;
             height: 5px;
         }

        #daybyday::after {
            content: "";
            display: block;
            background: salmon;
            height: 5px;
        }

Answer 1

你想要这样的东西吗？

所以我们在这里做的是，我们创建一个color: salmon和高度为5px的div，然后使用flex属性为display:flex设置元素的flex属性（ align-items:center - ＆gt;对于垂直居中和justify-content:center - ＆gt;对于水平居中，我们可以在行的中心获取h3元素，最后防止后面的div h3元素无法显示，我设置background-color:white，以便它不可见！

#daybyday {
  display: inline;
  background-color:white;
}

.text-special {
  font-style: italic;
  font-size: 23px;
  color: #7B7B7A;
}

.line {
  background-color: salmon;
  height: 5px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

<div class="line">
  <h3 id="daybyday"><span class="text-special">DAY-BY-DAY</span></h3>
  <div>