Lewati ke konten utama
iotools.cloudiotools.cloud

Generator Text Decoration CSS

API reference

Buat CSS text-decoration — garis bawah, garis atas, atau coret dengan garis solid, titik-titik, putus-putus, ganda, atau bergelombang, dengan warna, ketebalan, dan offset kustom — dengan pratinjau langsung, lalu salin CSS dan HTML.

Input

Hanya digunakan untuk pratinjau dan snippet HTML.

Jarak antara teks dan garis bawahnya (text-underline-offset).

Output

Teks yang sudah didekorasi akan muncul di sini.

Deklarasi text-decoration
CSS
HTML
Apakah ini membantu?

Cara lain menggunakan alat ini

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-text-decoration-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{}'

Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.

Tanyakan ke agen AI

Use the IOTools `css-text-decoration-generator` tool (CSS Text Decoration Generator) on this input:

YOUR_INPUT_HERE

Tempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.

Widget sematan

<iframe
  src="https://iotools.cloud/embed/css-text-decoration-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Generator Text Decoration CSS — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.

Biaya per panggilan API/MCPMulai dari 5 kredit
Butuh kredit lebih?Lihat harga

Juga tersedia melalui

IntegrasiEkstensi browserEkstensi VS Code

Panduan

Properti CSS text-decoration menggambar garis pada teks: garis bawah, garis atas, dan coretan. CSS modern juga memungkinkan Anda mengatur gaya garis tersebut, dengan pola solid, ganda, titik-titik, putus-putus, atau bergelombang, warna apa pun, dan ketebalan kustom. Generator ini menampilkan hasilnya pada teks Anda sendiri dan memberi Anda CSS untuk disalin.

Cara menggunakannya

  1. Ketik teks contoh. Teks ini hanya digunakan untuk pratinjau dan snippet HTML.
  2. Pilih garis yang Anda inginkan: garis bawah, garis atas, coret, atau kombinasi.
  3. Pilih gaya, warna, dan ketebalan. Garis merah bergelombang adalah tampilan "pemeriksa ejaan" yang familiar; titik-titik dan putus-putus cocok untuk tautan dan singkatan.
  4. Atur offset garis bawah dan lewati tinta. text-underline-offset memindahkan garis bawah menjauh dari teks, dan text-decoration-skip-ink: auto membuat garis melewati huruf bawah seperti g, j, dan y.
  5. Salin hasilnya: deklarasi satu baris, aturan CSS lengkap, dan snippet HTML yang sesuai.

Penjelasan shorthand

text-decoration adalah shorthand untuk text-decoration-line, text-decoration-style, text-decoration-color, dan text-decoration-thickness. Offset dan lewati tinta adalah properti terpisah, sehingga aturan yang dihasilkan menyertakannya pada baris tersendiri.

Tips aksesibilitas

  • Jangan hanya mengandalkan warna untuk menandai tautan. Pertahankan garis bawah, atau gunakan isyarat lain.
  • Coretan pada teks yang harus tetap mudah dibaca (harga, perubahan) harus memiliki kontras yang cukup dengan latar belakang.

Untuk bayangan dan efek cahaya pada teks, lihat Generator Text Shadow CSS. Untuk huruf yang diisi gradien, coba Generator CSS Gradient Text.

Privasi

Semuanya berjalan di browser Anda. Teks dan pengaturan Anda tidak pernah diunggah.

text decorationunderlinestrikethroughwavy underlineline-throughoverlinetext-underline-offsettypography

Suka alat-alatnya? Hilangkan iklannya.

Satu kali pembayaran menghapus semua iklan dari akun Anda, selamanya. Tanpa langganan, tanpa pelacakan.

Hapus iklan