【Text Decorations】

Underlines, markers, and text-emphasis!

Underlines -1-

These are simple underline decorations.

This is a dashed underline.

This is a double underline.

This is a dotted underline

This is a wavy underline.


           <p>These are <span class="line-1">simple underline decorations.</span></p>
           <p> This is a <span class="line-2">dashed underline.</span></p>
           <p>This is a <span class="line-3">double underline.</span></p>
           <p>This is a <span class="line-4">dotted underline</span></p>
           <p>This is a <span class="line-5">wavy underline.</span></p>

Copied!


.line-1 {
    text-decoration: underline;
    text-decoration-thickness: 2px; /* size */
    text-decoration-style: solid;
    text-underline-offset: 5px; /* Moves the underline further from the text */
    text-decoration-color: blue; /* color */
}
/* Dashed */
.line-2 {
    text-decoration: underline;
    text-decoration-thickness: 4px;/* size */
    text-decoration-style: dashed; 
    text-underline-offset: 3px; /* Moves the underline further from the text */
    text-decoration-color: brown; /* color */
}
/* Double*/
.line-3 {
    text-decoration: underline;
    text-decoration-thickness: 3px;/* size */
    text-decoration-style: double; 
    text-underline-offset:2px; /* Moves the underline further from the text */
    text-decoration-color: green; /* color */
}
/* Dotted */
.line-4 {
    text-decoration: underline;
    text-decoration-thickness: 5px;/* size */
    text-decoration-style: dotted;
    text-underline-offset: 2px; /* Moves the underline further from the text */
    text-decoration-color: orangered; /* color */
}
/* Wavy */
.line-5 {
    text-decoration: underline;
    text-decoration-thickness: 3px;/* size */
    text-decoration-style: wavy; 
    text-underline-offset: 5px; /* Moves the underline further from the text */
    text-decoration-color: deeppink; /* color */
}

Copied!

This is a strikethrough.

The text is sandwiched between an upper and a lower line.

This style is perfect for titles!

Bunny's Birthday Party!


            <p>This is a <span class="line-6">strikethrough.</span></p>
            <p><span class="line-7">The text is sandwiched between an upper and a lower line.</span></p>
            <p><span class="line-8">This style is perfect for titles!</span></p>
            <p><span class="line-9">Bunny's Birthday Party!</span></p>

Copied!


/* Strikethrough */
.line-6 {
    text-decoration-line: line-through;
    text-decoration-thickness: 2px; /* size */
    text-decoration-style: solid; /* choose style */
    text-decoration-color: red; /* color */
}
/* Underline & Overline */
.line-7 {
    text-decoration-line: underline overline;
    text-decoration-thickness: 2px; /* size */
    text-decoration-style: solid; /* choose style */
    text-underline-offset: 5px; /* Moves the underline further from the text */
    text-decoration-color: black; /* color */
}
.line-8 {
    text-decoration-line: underline overline;
    text-decoration-thickness: 2px; /* size */
    text-decoration-style: dashed; /* choose style */
    text-underline-offset: 5px; /* Moves the underline further from the text */
    text-decoration-color: black; /* color */
}
.line-9 {
    text-decoration-line: underline overline;
    text-decoration-thickness: 10px; /* size */
    text-decoration-style: dotted; /* choose style */
    text-underline-offset: 20px; /* Moves the underline further from the text */
    text-decoration-color: orangered; /* color */
    font-family: Henny Penny;/* Google Fonts */
    font-weight: bold;
    font-size:2rem; /* text size */
    color:green; /* text color */
}

Copied!

This is a title


            <span class="line-10">This is a title</span>

Copied!


.line-10 {
    border-top: 4px solid red; /* Top line */
    border-bottom: 4px solid blue; /* Bottom line */
    padding: 5px 0; /* Adds spacing between the text and the lines */
    font-family: Monoton;/* Google Fonts */
    font-size: 1.5rem;
  }

Copied!

Markers -1-

The marker fully highlights the text with a transparent color.


The marker <span class="marker1">fully highlights the text</span> with a transparent color.

Copied!


.marker1  {
    background-color: rgb(255 0 136 / .4); /* Adjust the opacity after the slash; .4 equals 40% opacity. */
}

Copied!

The marker partially highlights the bottom portion of the text with a transparent color.


The marker <span class="marker2">partially highlights the bottom portion of the text</span> with a transparent color.

Copied!


.marker2 {
   position: relative; 
   z-index: 0; 
}

.marker2::before {
    content: ""; 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 0rem; /* Positions the marker at the bottom edge of the parent container. */
    height: 0.4em; /* Sets the height of the marker. */
    background: rgb(148 255 175 / .7); /* Applies a color to the marker. */
    z-index: -1; 
}

Copied!

Text-Emphasis -1-

Better to use monospaced fonts for text emphasis.


            <p>Better to use monospaced fonts for <span class="emphasis-1">text emphasis</span>.</p>
            <p>Better to use monospaced fonts for <span class="emphasis-2">text emphasis</span>.</p>
            <p>Better to use monospaced fonts for <span class="emphasis-3">text emphasis</span>.</p>
            <p>Better to use monospaced fonts for <span class="emphasis-4">text emphasis</span>.</p>
            <p>Better to use monospaced fonts for <span class="emphasis-5">text emphasis</span>.</p>
            <p>Better to use monospaced fonts for <span class="emphasis-6">text emphasis</span>.</p>
            <p>Better to use monospaced fonts for <span class="emphasis-7">text emphasis</span>.</p>
            <p>Better to use monospaced fonts for <span class="emphasis-8">text emphasis</span>.</p>

Copied!


.emphasis-1 {
    text-emphasis: filled blue; /* style & color */
    font-family:IBM Plex Mono; /* Google Fonts */
  }
  .emphasis-2 {
    text-emphasis: circle purple; /* style & color */
    font-family:IBM Plex Mono; /* Google Fonts */
  }
  .emphasis-3 {
    text-emphasis: double-circle deeppink; /* style & color */
    font-family:IBM Plex Mono; /* Google Fonts */
  }
  .emphasis-4 {
    text-emphasis: open brown; /* style & color */
    font-family:IBM Plex Mono; /* Google Fonts */
  }
  .emphasis-5 {
    text-emphasis: sesame orangered; /* style & color */
    font-family:IBM Plex Mono; /* Google Fonts */
  }
  .emphasis-6 {
    text-emphasis: triangle green; /* style & color */
    font-family:IBM Plex Mono; /* Google Fonts */
  }
.emphasis-7 {
  text-emphasis: "x" rgb(67, 67, 67); /* style & color */
  font-family:IBM Plex Mono; /* Google Fonts */
}
.emphasis-8 {
    text-emphasis: "★" rgb(0, 255, 55); /* style & color */
    font-family:IBM Plex Mono; /* Google Fonts */
}

Copied!

縦書きの文章を強調します。


<p class="vertical">縦書きの文章を <span class="emphasis-8">強調します</span>。</p>

Copied!


.vertical {
writing-mode: vertical-rl; /* vertically align text*/
}
.emphasis-8 {
text-emphasis-position: under right; /* positions emphasis at the right*/
text-emphasis: sesame;
}

Copied!

このサンプルでは圏点の大きさを調整しました。


<p>このサンプルでは<span class="emphasis-10">圏点の大きさを調整</span>しました。</p>

Copied!


.emphasis-10 {
    background-image: radial-gradient(circle at center, blue 40%, transparent 40%); /* Adjust the percentage to control the size of the dot */
    background-position: top right; 
    background-repeat: repeat-x;
    background-size: 1rem 1rem; /* Matches one dot to one letter (approximately 1rem each) */
    padding-top: .8em; /* Adjusts the vertical positioning of the emphasis */
}

Copied!