CSSを使用してテキスト削除効果を実現する方法

Web デザインでは、ページの美しさと興味を高めるためにいくつかの特殊効果が必要になる場合があります。たとえば、重要な情報を強調したり、特定のコンテンツを強調したりするために、テキスト効果が必要になる場合があります。その 1 つはテキストの取り消し線です。これは、一部のテキストが無効または関連性がなくなったことを示すために取り消し線が引かれます。この記事ではCSSを使って文字削除効果を実現する方法を紹介します。

1. text-decoration: line-through;

テキスト削除効果を実現するには、text-decoration 属性を使用し、値を line-through に設定します。このプロパティは通常、テキストに下線を引くために使用されますが、テキストの削除効果を設定するために使用することもできます。以下はサンプル コードです:

<p class="delete">这是一段被删除的文本。</p>

.delete {
  text-decoration: line-through;
}

この例では、「delete」という名前のクラスを p 要素に追加し、その text-decoration 属性値を line-through に設定します。つまり、このテキスト内では、単語が削除されたことを示すために取り消し線が引かれます。これは、テキスト削除効果を実現する最も基本的で簡単な方法です。

2. 取り消し線の色、スタイル、太さをカスタマイズする

スタイルでは、取り消し線の色、スタイル、太さをさらにカスタマイズできます。一般的に使用される属性は、text-decoration-color、text-decoration-style、および text-decoration-thickness です。サンプル コードは次のとおりです。

<p class="delete" style="text-decoration-color: red; text-decoration-style: dotted; text-decoration-thickness: 2px;">这是一段自定义线样式、线粗细和线颜色的被删除文本。</p>

.delete {
  text-decoration-color: red;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
}

この例では、「delete」という名前のクラスも p 要素に追加しますが、今回はテキスト スタイルの追加属性を使用します。取り消し線の色を赤、スタイルを点線、太さを 2 ピクセルに設定します。このようにして、Web ページの特定のニーズに合わせて、必要に応じてテキスト削除スタイルをカスタマイズできます。

3. 擬似要素::before と ::after を使用する

text-decoration 属性の使用に加えて、擬似要素::before と ::after も使用できます。 ::after テキスト削除効果を実現します。サンプル コードは次のとおりです。

<p class="delete">这是一段使用伪元素实现的被删除文本。</p>

.delete::before,
.delete::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid #000;
}

.delete::before {
    transform: rotate(-45deg);
}

.delete::after {
    transform: rotate(45deg);
}

この例では、疑似要素 ::before と ::after を使用して取り消し線を作成します。これらの要素の content 属性は空に設定され、位置は絶対に設定され、テキストと重なることが可能になります。これらの要素に境界線を追加し、45 度回転して取り消し線の形状を作成しました。

概要

テキスト削除エフェクトは、Web ページをデザインするときに非常に便利なエフェクトであり、適切なシーンやダイアログを描写するのに役立ちます。この記事では、テキストの削除効果を実現する 3 つの方法 (テキスト装飾属性、カスタム スタイル、擬似要素の使用) を紹介しました。この記事が、Web デザインの柔軟性と楽しさをさらに高めるのに役立つことを願っています。

以上がCSSを使用してテキスト削除効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。