html - CSS : set the CSS line

<分区>

.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，如下例:

最佳答案

试试这个:

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

关于html - CSS : set the CSS line，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47919103/

上一篇：html - 为什么html元素的高度没有效果？

下一篇：java - 使用 iText 将 HTML 转换为 PDF

相关文章：

html - CSS HTML 从屏幕右侧隐藏一个字段

css - 如何在 Primefaces 数据表中显示图标而不是数据？

jquery - 让 nth-child 在 IE8 及更低版本中工作

css - 基本 CSS : having unordered list extend beyond container div?

html - 单击缩略图之前如何在 div 中加载图像？

html - 当3个div没有空间时并排放置3个div，如何只替换第三个？

css - div 容器 : limit to text going on one line to right

css - 带有填充和边距的粘性页脚 - 在 FF 中工作，但在 Chrome 和 IE 中存在问题

javascript - 如何删除 Bootstrap 中的水平滚动？

html - css 模态框不工作