CSSで一部のテキストを強調表示できるプロパティ

@ハクト 2022-09-30 14:40:09に投稿

 

今回は「span」タグを使用しテキストの一部を装飾するCSSを紹介します。

一部の文字を強調表示したい場合などにご活用ください

HTML

 <p>文字を<span>装飾</span>する</p>

背景を入れる

span{
  background-color:#333;
  color:#fff;
}

 下線を入れる

 

span{
  text-decoration:underline;
}

 少し太くした点線を入れる

 

span{
  text-decoration:
    underline dotted 5px;
}

 色を付けた波線を入れる

 

span{
  text-decoration:
    underline wavy #4eb4e0;
}

 打消し線を入れる

 

span{
  text-decoration: 
    line-through 5px #e8467f;
}

 上下に破線を入れる

 

span{
  text-decoration: 
    dashed underline overline 5px;
}

 文字の上に斜め線を入れる

 

span{
  -webkit-text-emphasis: double-circle #c699e3;
  text-emphasis: double-circle #c699e3;
}

 文字の上に二重丸を入れる

 

span{
  -webkit-text-emphasis: 
    double-circle #c699e3;
  text-emphasis: 
    double-circle #c699e3;
}

 蛍光ペン風の下線を入れる

 

span{
  background: 
    linear-gradient(transparent 60%, #FFFE03 60%);
}

 

@ハクト

サービス作り・デザイン好き。70年代生まれのWEBエンジニア。WEBパーツをCSSでカスタマイズしてコピペできるサービスを運営中「Pa-tu」。実装したWEBパーツやツールを利用してWEB情報やライフハックを発信してます。

Twitter