::之前和::之后带有标题的元素

Question

尝试在我的<h2>标题的左侧和右侧创建条形码。

＆＃13;

＆＃13;

#s-text h2 {
  font-size: 2.25em;
  font-weight: 700;
  color: black;
  margin-bottom: 20px;
  padding: 0;
}
#s-text h2:after {
  content: "";
  position: absolute;
  display: inline-block;
  right: 0;
  height: 10px;
  width: 30px;
  background-color: red;
}
#s-text h2:before {
  content: "";
  position: absolute;
  display: inline-block;
  left: 0;
  height: 10px;
  width: 30px;
  background-color: red;
}

＆＃13;

<div id="s-text">
  <h2>Title 1</h2>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是你要找的吗？

#s-text {
  text-align: center;
}

#s-text h2 {
  font-size: 2.25em;
  font-weight: 700;
  color: black;
  position: relative;
  margin-bottom: 20px; padding: 0;
  display: inline-block;
}

#s-text h2:after {
  right:-1em;
}

#s-text h2:before {
  left:-1em;
}

#s-text h2:before,
#s-text h2:after {
  content: "";
  position: absolute;
  display: inline-block;
  height: 10px; width: 30px;
  background-color: red;
  top: 50%;
  transform: translateY(-50%);
}

<div id="s-text">
  <h2>what is it</h2>
</div>