CSS :设置CSS行

Question

​

.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

将display属性值设置为inline-block是一个很好的选择，@Vinothin为您解答了这个问题。这是另一个你可以使用的技巧。

使用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%;
}

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

​

如果在单词前后需要空格，那么通过增加或减少翻译值来处理。

在将来，使用transform属性也会对您有很大帮助。假设您有一个居中的列表，并且您需要将图标左边的位置定位到列表的中间，那么transform技巧就只能使用这个方法了。我已经告诉了这个技巧，因为我以前也面临过类似的问题。

希望这能有所帮助！

Answer 2

试试这个：

​

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

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

    <h2><span class="line"><span class="promo">Promo</span></span></h2>
  <div>
<div>

​