Membuat & Memasang Teks Diantara Dua Garis

Membuat & Memasang Teks Diantara Dua Garis - hmm judul artikelnya sedikit membingungkan ya, intinya seperti ini kita membuat teks dan memasangkan dua garis di sisi kanan atau kiri teks tersebut sehingga teks berada ditengah garis. Atau judulnya seperti ini saja ya, Memasang teks ditengah garis.. Yaa pokoknya pada artikel ini saya akan membuat dan memasang tesk diantara dua garis seperti yang terlihat pada gambar berikut ini

Jika sobat tertarik untuk membuat dan memasang teks dianatara dua garis ini, silahkan salin kode CSS berikut ini kedalam template blog sobat. salin sebelum kode ]]></b:skin> atau sebelum kode </style>
menu Template >> Edit HTML >> cari kode ]]></b:skin> atau </style>

tekstengah {font-family:Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5em;
  letter-spacing: -0.05em;
  margin:0px;
  padding: .1em 0;
  color: #000;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
}
tekstengah:before,
tekstengah:after {
  content: "";
  position: relative;
  display: inline-block;
  width: 20%;
  height: 1px;
  vertical-align: middle;
  background: #000;
}
tekstengah:before {    
  left: -5px;
  margin: 0;
}
tekstengah:after {    
  left: 5px;
  margin: 0;
}
tekstengah > span {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}

Penjelasan:
Edit beberapa value yang ada pada tiap komponen berikut ini agar menyesuaikan dengan tata letak yang diharapkan
tekstengah:before,
tekstengah:after {
content: "";
position: relative;
display: inline-block;
width: 20%; /* ganti untuk menyesuaikan lebar */
height: 1px;
vertical-align: middle;
background: #000;
}
tekstengah:before {
left: -5px; /* ganti untuk menyesuaikan jarak teks dan garis */
margin: 0;
}
tekstengah:after {
left: 5px;/* ganti untuk menyesuaikan jarak teks dan garis */
margin: 0;
}

DEMO

Membuat & Memasang Teks Diantara Dua Garis

• Ingin efek kilat seperti ini? Klik DISINI!

Sedangkan untuk kode markup HTML membuat dan memasang tesk diantara dua garis, silahkan salin kode berikut ini:
<tekstengah>Membuat & Memasang Teks Diantara Dua Garis</tekstengah>

Mudah bukan? Jika sobat bertanya pengaruh kode CSS tersebut terhadap loading blog, tidak ada pengaruhnya sama sekali. Dan silahkan jika sobat tertarik untuk membuat dan memasang tesk diantara dua garis didalam blog atau pun artikel blog sobat. Terimakasih