「CSS」text-decoration で文字に線の種類を引くサンプル

2021年8月24日

書式
text-decoration: xxx
使用例
1.点線 dotted

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<style>
.cft {
text-decoration: underline dotted green;
}
</style>
<div class="cft">test data 12345678</div>
<style> .cft { text-decoration: underline dotted green; } </style> <div class="cft">test data 12345678</div>
<style>
  .cft {
    text-decoration: underline dotted green;
  }
</style>
<div class="cft">test data 12345678</div>

2.破線 dashed

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<style>
.cft {
text-decoration: underline dashed blue;
}
</style>
<div class="cft">test data 123456</div>
<style> .cft { text-decoration: underline dashed blue; } </style> <div class="cft">test data 123456</div>
<style>
  .cft {
    text-decoration: underline dashed blue;
  }
</style>
<div class="cft">test data 123456</div>

3.波状の線 wavy

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<style>
.cft {
text-decoration: underline wavy blue;
}
</style>
<div class="cft">test data 123456</div>
<style> .cft { text-decoration: underline wavy blue; } </style> <div class="cft">test data 123456</div>
<style>
  .cft {
    text-decoration: underline wavy blue;
  }
</style>
<div class="cft">test data 123456</div>

 

CSS

Posted by arkgame