Cara Membuat Garis Tengah pada Teks dengan CSS

13/05/2018    Risman Hakim    43     Website

Cara Membuat Garis Tengah pada Teks dengan CSS - Pada HTML kita dapat memanfaatkan tag del untuk membuat sebuah garis tengah pada suatu objek berupa teks. Akan tetapi kadang kala tampilan garis yang sederhana membuat tampilan kurang begitu menarik untuk kita lihat, nah kali ini saya akan berbagi tutorial sederhana yang bisa membuat tampilan garis pada objek teks terlihat lebih menarik. Langsung saja simak tutorial bagaimana Cara Membuat Garis Tengah pada Teks dengan CSS berikut ini.

Langkah 1 : Cara Membuat Garis Tengah pada Teks dengan CSS

Baik, kita mulai praktekan membuat garis tengah dengan membuat objek yang akan dikenai garis tengah, dalam kasus ini yakni berupa teks. Dimana teks akan diapit dengan tag del seperti berikut.

<body>
    <p>
      <del>Lorem ipsum dolor sit amet,</del> consectetur adipisicing elit.
    </p>
</body>

Langkah 2 : Cara Membuat Garis Tengah pada Teks dengan CSS

Langkah berikutnya, kita akan sedikit mengubah tampilan dari garis dengan sintak CSS3. Dimana garis default pada teks akan diubah menjadi garis kuas, berikut sintak CSS untuk mengubah garis pada teks nya.

@import url('https://fonts.googleapis.com/css?family=Boogaloo');
html, body {
  height: 100%;
}
body {
  font-family: 'Boogaloo', cursive;
  display: flex;
  align-items: center;
}
p {
  font-size: 46px;
  margin: auto;
}
del {
  --color: var(--del-color, #00cec9);
  text-decoration: none;
  padding: 0 .5em;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(to left, rgba(255, 255, 255, .5), transparent),
    linear-gradient(2deg, var(--color) 50%, transparent 50%),
    linear-gradient(-.9deg, var(--color) 50%, transparent 50%),
    linear-gradient(-60deg, var(--color) 50%, transparent 50%),
    linear-gradient(120deg, var(--color) 50%, transparent 50%);
 
  background-size:
    50% 1.5px,
    calc(100% - 20px) 10px,
    calc(100% - 20px) 10px,
    10px 10px,
    8px 8px;
 
  background-position:
    100% calc(50% + 2px),
    center center,
    center center,
    2px 50%,
    calc(100% - 5px) calc(50% + 1px);
}

Setelah semua sintak diatas telah diketikan semua, silahkan simpan filenya kemudian buka pada browser masing - masing dan lihat hasilnya, Maka garis yang tadinya hanya hitam kini telah berubah seperti pada gambar berikut.

Cara Membuat Garis Tengah pada Teks dengan CSS

Baiklah, cukup sekian tutorial sederhana bagaimana Cara Membuat Garis Tengah pada Teks dengan CSS, semoga tutorial ini bisa bermanfaat dan selamat mencoba :)

Web Design, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More