Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
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 :
0
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%;
}
2
