mengatur garis CSS

html:

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

bagaimana agar garis css nya sesuai dengan panjang tulisan contoh seperti dibawah ini :

css html

@inginbelajar

95 Kontribusi 21 Poin

Diperbarui 6 tahun yang lalu

1 Jawaban:

Jawaban Terpilih

bisa dicoba seperti dibawah ini, mungkin mendekati apa yg agan maksud

HTML

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

CSS

 h2 {
  padding: 0;
  margin: 0;
}
.fancy {
	font-size:2em;
	color:#372568;
	text-align:center;
}
.fancy span {
  display: inline-block;
  position: relative;

}
.fancy span:before,
.fancy span:after {
  content: '';
  position: absolute;
  background: coral;
  height: 4px;
  width: 50px;
  top: 50%;
  margin: 0 5px 0 5px;
}
.fancy span:before {
  right: 100%;
}
.fancy span:after {
  left: 100%;
}

@maddock

119 Kontribusi 115 Poin

Dipost 6 tahun yang lalu

Kelas Premium! Belajar bikin website dari nol sekarang

mengatur garis CSS

Kelas Premium!
Belajar bikin website dari nol sekarang