CSS: CSS hattını

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>

set

Sonuç:

: aşağıda örneği yazılı uzunluğuna göre çizgisini css nasıl

Answer 1

inline-block için display özellik değerini ayarlama @Vinothin sizin için yanıtladı olarak gitmek iyidir. İşte kullanabileceğiniz başka bir numara.

transform özelliğini kullanmak mutlak konumu kullanırken size yardımcı olacaktır.

önce aralık ve kelime artırabilir veya düşürerek, tercüme değeri ile oynamak sonra gerekiyorsa

.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 özelliğini kullanmak, gelecekte de size yardımcı olacaktır. Merkezlenmiş bir listeniz olduğunu ve simgenin sol ortasını listeye konumlandırmanız gerektiğini varsayalım, daha sonra transform numaranın yalnızca yolun gitmesini sağlayın. Daha önce de benzer bir sorunla karşılaştığım için bu hileyi bilgilendirdim.

Bu yardımcı olur umarız!

Answer 2

bu deneyin:

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