CSS：设置CSS行[重复]

Question

这个问题在这里已有答案：

• CSS technique for a horizontal line with words in the middle 19个答案

.banner-bottom h2 {
  font-size: 2em;
  color: #372568;
  position: relative;
  padding-bottom: 1em;
  text-align: center;
}

.banner-bottom h2:before {
  content: '';
  position: absolute;
  top: 25%;
  left: 25%;
  background: #372568;
  height: 2px;
  width: 8%;
}

.banner-bottom h2:after {
  content: '';
  position: absolute;
  top: 25%;
  right: 25%;
  background: #372568;
  height: 2px;
  width: 8%;
}

<div class="banner-bottom">
  <div class="container">
    <h2>Special Promo</h2>
    <h2>Promo</h2>
    <div>
      <div>

结果：

如何根据编写示例的长度css其行如下：

Answer 1

将@zinxswpoi属性值设置为display是很好的选择，因为@Vinothin已经为您解答了。这是你可以使用的另一个技巧。

使用inline-block属性将帮助您使用绝对位置。

transform

.banner-bottom h2 {
  font-size: 2em;
  color: #372568;
  position: relative;
  padding-bottom: 1em;
  text-align: center;
}

.banner-bottom h2:before {
  content: '';
  position: absolute;
  top: 25%;
  transform: translateX(-100%);
  /* no left value is required */
  background: #372568;
  height: 2px;
  width: 8%;
}

.banner-bottom h2:after {
  content: '';
  position: absolute;
  top: 25%;
  /* no right value is required */
  background: #372568;
  height: 2px;
  width: 8%;
}

如果您需要在单词前后间隔，则通过增加或减少它来使用translate值。

---

使用

<div class="banner-bottom">
  <div class="container">
    <h2>Special Promo</h2>
    <h2>Promo</h2>
  </div>
</div>

属性将在未来对您有所帮助。假设你有一个居中的列表，你需要将图标左中心放置到列表中，然后transform只采用这种方式。我已经告知了这个技巧，因为我之前也遇到过类似的问题。

希望这可以帮助！

Answer 2

试试这个：

transform

.banner-bottom h2 {
  font-size: 2em;
    color: #372568;
    padding-bottom: 1em;
    text-align: center;
}

.line:before {
  content: '';
    display: inline-block;
    background: #372568;
    height: 2px;
    width: 8%;
    margin: 10px;
}

.line:after {
  content: '';
    display: inline-block;
    background: #372568;
    height: 2px;
    width: 8%;
    margin: 10px;
}
.promo {
  display: inline-block;
}