CSSテキストの取り消し線の使い方

CSS テキストの取り消し線は、一般的なテキスト スタイル効果です。テキストに水平線を追加して、テキストが削除されたこと、またはコメントであることを示すことができます。また、テキストの変更を強調するために使用することもできます。

Web デザインでは、CSS テキストの取り消し線が広く使用されています。一部のブログ投稿では、作成者が元のテキスト コンテンツを変更または削除したことを示すために取り消し線が使用されています。もちろん、CSS テキストの取り消し線を使用して、特別価格を表示したり、特別に強調したテキストを作成したりすることもできます。

具体的には、以下に示すように、CSS テキストの取り消し線で使用される属性は text-decoration で、その値は line-through です。

text-decoration: line-through;

さらに、実際のアプリケーションでは、次のこともできます。 CSS 疑似クラス セレクターを使用して、より柔軟なテキストの取り消し線を実現します。

たとえば、以下に示すように、デモの ID を持つテキストにマウスを置いたときに取り消し線効果を追加できます。

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

上記のコードは、デモの ID を持つテキストがマウスを移動したときに取り消し線効果を追加することを示しています。のデモには、マウス ホバーの取り消し線効果が追加されています。つまり、マウスをテキスト上に移動すると、テキストに取り消し線が表示されます。

特別な取り消し線スタイルを追加したい場合は、以下に示すように、CSS 疑似要素 :before または :after を使用してそれを実現できます。

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

上記のコードは、 ID はデモです テキストの前に取り消し線スタイルを追加します。取り消し線の色は黒、幅はテキスト幅全体を占め、高さは 1 ピクセル、位置はテキストの中央です。

CSS テキストの取り消し線を使用する場合は、互換性の問題にも注意する必要があることに注意してください。ブラウザによってテキスト装飾の解釈が異なる可能性があるため、記述時にブラウザ固有のスタイル変更メソッドを使用することは避け、ユニバーサル属性を使用することをお勧めします。

以上がCSSテキストの取り消し線の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。