Tag: text-decoration

CSS text-decoration Property

Post author By Lena Stanley
Post date January 19, 2022

The CSS text-decoration property defines the decoration added to the text and is a shorthand property for:

Syntax:

text-decoration: text-decoration-line text-decoration-color text-decoration-style;

text-decoration-line (required) – settles the kind of text decoration to use (like underline, line-through, overline).

text-decoration-color – settles the colour of the text decoration.

text-decoration-style – settles the style of the text decoration (like solid, dotted, dashed, wavy, double).

Example:

<!DOCTYPE html>
<html>
<head>
<style>

h3 {
  text-decoration: underline red;
}

h4 {
  text-decoration: underline wavy green;
}

p {
  text-decoration: line-through;
}
</style>
</head>
<body>

<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<p>This is a paragraph.</p>

</body>
</html>

Output:

This is heading 3

This is heading 4

This is a paragraph.

Read also:

CSS Hamburger Menu

How to add custom fonts to HTML?

HTML Text Formatting And Styles

Tags CSS, text-decoration

Web development

CSS text-decoration-color Property

Post author By Lena Stanley
Post date January 19, 2022

The CSS text-decoration-color property defines the colour of the text-decoration (underlines, linethroughs, overlines).

Demo:

Click the “Try it” button to change the colour of the underline:

Hello world!

Syntax:

text-decoration-color: color;

color – defines the colour of the text-decoration.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-decoration: underline;
  text-decoration-color: lightblue;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.

Read also:

CSS font-style Property

CSS border-left-style

HTML Quotations

Tags CSS, text-decoration, text-decoration-color

Web development

CSS text-decoration-style Property

Post author By Lena Stanley
Post date January 19, 2022

The CSS text-decoration-style property settles the style of the text decoration (like solid, dotted, dashed, wavy, or double).

Demo:

Syntax:

text-decoration-style: solid|double|dotted|dashed|wavy;

solid (default) – the line will display as a single line.

double – the line will display as a double line.

dotted – the line will display as a dotted line.

dashed – the line will display as a dashed line.

wavy – the line will display as a wavy line.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.ex1 {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

.ex2 {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

.ex3 {
  text-decoration-line: underline;
  text-decoration-style: double;
}

</style>
</head>
<body>

<div class="ex1">This is some text with a dotted underline.</div>
<br>

<div class="ex2">This is some text with a wavy underline.</div>
<br>

<div class="ex3">This is some text with a double underline.</div>

</body>
</html>

Output:

This is some text with a dotted underline.

This is some text with a wavy underline.

This is some text with a double underline.

Read also:

CSS border-style Property

HTML Text Formatting And Styles

CSS Background Stripes

Tags CSS, text-decoration, text-decoration-style

Web development

CSS text-decoration-line Property

Post author By Lena Stanley
Post date January 19, 2022

The CSS text-decoration-line property settles the kind of text decoration to use (like underline, overline, line-through).

Demo:

Syntax:

text-decoration-line: none|underline|overline|line-through;

none (default) – defines no line for the text-decoration.

underline – defines that a line will be displayed under the text.

overline – defines that a line will be displayed over the text.

line-through – defines that a line will be displayed through the text.

Example1:

<!DOCTYPE html>
<html>
<head>
<style>
.ex1 {
   text-decoration-line: overline; 
}

.ex2 {
   text-decoration-line: underline; 
}

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

</style>
</head>
<body>

<div class="ex1">This is some text with a line on top.</div>
<br>

<div class="ex2">This is some text with an underline.</div>
<br>

<div class="ex3">This is some text with a line-through.</div>

</body>
</html>

Output:

This is some text with a line on top.

This is some text with an underline.

This is some text with a line-through.

Example2:

You can also combine more than one value, like underline and overline to display lines both under and over the text.

<!DOCTYPE html>
<html>
<head>
<style>

.example-2 {
   text-decoration-line: overline underline; 
}
</style>
</head>
<body>

<div class="example-2">This is some text with an overline and an underline.</div>

</body>
</html>

Output:

This is some text with an overline and an underline.

Enjoy coding!

Read also:

HTML Text Formatting And Styles

CSS Styling Links

Web Safe Fonts