Cara menggunakan coretan teks css

Struktur teks CSS ialah kesan gaya teks biasa Anda boleh menambah garis mendatar pada teks untuk menunjukkan bahawa teks telah dipadamkan atau ia juga boleh digunakan untuk menekankan perubahan dalam teks.

Dalam reka bentuk web, coretan teks CSS digunakan secara meluas dalam beberapa catatan blog untuk menunjukkan bahawa pengarang telah mengubah suai atau memadamkan kandungan teks asal. Sudah tentu, coretan teks CSS juga boleh digunakan untuk memaparkan harga istimewa atau membuat beberapa teks yang ditekankan khas.

Khususnya, atribut yang digunakan oleh coretan teks CSS ialah hiasan teks, dan nilainya adalah baris, seperti yang ditunjukkan di bawah:

text-decoration: line-through;

Selain itu, dalam aplikasi praktikal, Kita boleh juga menggunakan pemilih kelas pseudo CSS untuk mencapai coretan teks yang lebih fleksibel.

Sebagai contoh, kita boleh menambah kesan coretan apabila tetikus melayang pada teks dengan ID demo, seperti yang ditunjukkan di bawah:

#demo:hover {
    text-decoration: line-through;
}

Kod di atas bermaksud menambahkan tetikus ke teks dengan ID demo Kesan coretan apabila melayang, iaitu, apabila tetikus bergerak ke atas teks, teks akan muncul coretan.

Jika kita ingin menambah gaya coretan khas, kita boleh menggunakan unsur pseudo CSS :sebelum atau :selepas untuk mencapainya, seperti yang ditunjukkan di bawah:

#demo:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    transform: translateY(-50%);
    background-color: #000;
}

Kod di atas menunjukkan bahawa ID ialah Tambah gaya coretan di hadapan teks demo Warna coretan adalah hitam, lebar menempati keseluruhan lebar teks, ketinggian ialah 1 piksel dan kedudukan berada di tengah-tengah teks.

Perlu diambil perhatian bahawa apabila menggunakan coretan teks CSS, kita juga mesti memberi perhatian kepada isu keserasian. Oleh kerana penyemak imbas yang berbeza mungkin mentafsirkan hiasan teks secara berbeza, elakkan menggunakan kaedah pengubahsuaian gaya khusus penyemak imbas semasa menulis. Adalah disyorkan untuk menggunakan atribut universal.

Atas ialah kandungan terperinci Cara menggunakan coretan teks css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!