CSSテキストの取り消し線

CSS テキストの取り消し線は、テキストに水平線を追加して、テキストが削除されたこと、またはコメントであることを強調するために使用することもできます。

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

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

<code>text-decoration: line-through;</code>

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

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

<code>#demo:hover {
    text-decoration: line-through;
}</code>

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

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

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

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

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

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