带有标题的 ::before 和 ::after 元素

Question

试图让条形图出现在我的 <h2> 标题的左侧和右侧。

#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;
}

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

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>

带有标题的 ::before 和 ::after 元素

::before and ::after elements with title

html

css

pseudo-element