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

を@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は唯一の方法です。以前も同様の問題に直面していたので、私はこのトリックを知らせました。

希望すると便利です。

Answer 2

このお試しください：inline-blockにdisplayプロパティの値を設定する

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