Text Decoration Line
- The `text-decoration-line` CSS property is used to specify the type of line decoration to be applied to the text content of an element. It allows you to control individual line decorations, such as underlines, overlines, and line-throughs, separately.
- none: This is the default value and specifies no line decoration.
- underline: Adds a line beneath the text. For example:
text-decoration-line: underline;
- overline: Adds a line above the text. For example:
text-decoration-line: overline;
- line-through: Draws a horizontal line through the text. For example:
text-decoration-line: line-through;
- underline overline: Adds both an underline and an overline to the text. For example:
text-decoration-line: underline overline;
- underline line-through: Adds an underline and a line-through to the text. For example:
text-decoration-line: underline line-through;
- You can also combine the `text-decoration-line` property with the `text-decoration-color` property to specify the color of the line decorations. For example:
text-decoration-line: underline;
text-decoration-color: red;
- In this case, the underline decoration will be red.
- It's important to note that the `text-decoration-line` property overrides the `text-decoration` property when both are used together. If you specify a value for `text-decoration-line`, it will take precedence over any line decorations set by the `text-decoration` property.
<!DOCTYPE html>
<html>
<head>
<style>
.underline {
text-decoration-line: underline;
}
.overline {
text-decoration-line: overline;
text-decoration-color: blue;
}
.line-through {
text-decoration-line: line-through;
}
</style>
</head>
<body>
<p>This is a <span class="underline">sample text</span> with underline.</p>
<p>This is another <span class="overline">sample text</span> with overline.</p>
<p>This is some <span class="line-through">sample text</span> with line-through.</p>
</body>
</html>
- In this example, the first paragraph has the class `underline`, which applies the `text-decoration-line: underline` style to the span element containing the text "sample text." As a result, the first paragraph displays the text with an underline.
- The second paragraph has the class `overline`, which applies the `text-decoration-line: overline` style to the span element containing the text "sample text." Additionally, the `text-decoration-color: blue` style specifies that the overline should be displayed in blue color. As a result, the second paragraph displays the text with a blue overline.
- The third paragraph has the class `line-through`, which applies the `text-decoration-line: line-through` style to the span element containing the text "sample text." As a result, the third paragraph displays the text with a line through it.
- By using the `text-decoration-line` property, you have fine-grained control over the individual line decorations applied to the text. You can customize the type of line, apply multiple line decorations together, and even specify the color of the line decorations using the `text-decoration-color` property.
- Remember that the browser support for some values of `text-decoration-line`, such as `overline` and `line-through`, may vary. It's always a good idea to test your CSS code across different browsers to ensure consistent rendering.
- The `text-decoration-color` CSS property is used to specify the color of the line decorations applied to text using the `text-decoration-line` property. It allows you to customize the color of underlines, overlines, and line-throughs individually.
- The `text-decoration-color` property accepts various color values, including named colors, hexadecimal colors, RGB values, HSL values, and more.
- Using a named color:
text-decoration-color: red;
- This sets the color of the line decorations to red.
- Using a hexadecimal color:
text-decoration-color: #00aabb;
- This sets the color of the line decorations to a specific shade of teal.
- Using an RGB value:
text-decoration-color: rgb(255, 0, 128);
- This sets the color of the line decorations to a specific shade of pink.
- Using an HSL value:
text-decoration-color: hsl(210, 50%, 80%);
- This sets the color of the line decorations to a specific shade of light blue.
- The `text-decoration-color` property can be used in conjunction with the `text-decoration-line` property to customize the appearance of text decorations. For example:
.text-decoration-example {
text-decoration-line: underline;
text-decoration-color: green;
}
- In this example, the `text-decoration-line` property sets the line decoration to an underline, while the `text-decoration-color` property sets the color of the underline to green. By applying this class to an element, you can create underlined text with a specific color:
<p class="text-decoration-example">
This is underlined text with a green color.
</p>
- It's important to note that the `text-decoration-color` property only affects the color of the line decorations and does not apply to other text properties like the font color. If you want to change the color of the text itself, you should use the `color` property instead.
- Also, keep in mind that the `text-decoration-color` property requires browser support, and older browsers may not fully support it. It's recommended to test your CSS code across different browsers to ensure consistent rendering.
- The `text-decoration-style` CSS property is used to specify the style or appearance of the line decorations applied to text using the `text-decoration-line` property. It allows you to control the visual style of underlines, overlines, and line-throughs individually.
- The `text-decoration-style` property accepts the following values:
- solid: This is the default value and specifies a solid, continuous line decoration.
- double: Specifies a double line decoration, consisting of two parallel lines.
- dotted: Specifies a dotted line decoration, with small dots spaced evenly.
- dashed: Specifies a dashed line decoration, with short dashes spaced evenly.
- wavy: Specifies a wavy line decoration, with a wave-like pattern.
- Using `solid`:
text-decoration-style: solid;
- This sets the line decoration style to a solid, continuous line.
- Using `double`:
text-decoration-style: double;
- This sets the line decoration style to a double line.
- Using `dotted`:
text-decoration-style: dotted;
- This sets the line decoration style to a dotted line.
- Using `dashed`:
text-decoration-style: dashed;
- This sets the line decoration style to a dashed line.
- Using `wavy`:
text-decoration-style: wavy;
- This sets the line decoration style to a wavy line.
- The `text-decoration-style` property can be used in conjunction with the `text-decoration-line` property to customize the appearance of text decorations. For example:
.text-decoration-example {
text-decoration-line: underline;
text-decoration-style: dashed;
}
- In this example, the `text-decoration-line` property sets the line decoration to an underline, while the `text-decoration-style` property sets the style of the underline to dashed. By applying this class to an element, you can create underlined text with a dashed line style:
<p class="text-decoration-example">
This is underlined text with a dashed line style.
</p>
- It's important to note that the `text-decoration-style` property only affects the style of the line decorations and does not apply to other text properties like the font or color. If you want to change the appearance of the text itself, you should use other CSS properties such as `color` or `font-family`.
- Also, keep in mind that the `text-decoration-style` property requires browser support, and older browsers may not fully support it. It's recommended to test your CSS code across different browsers to ensure consistent rendering.
- The text-decoration-thickness CSS property sets the stroke thickness of the decoration line that is used on text in an element.
- <length> : A length value, such as 1px or 1em.
- <percentage> : A percentage value, such as 50%.
- auto : The browser's default thickness.
A complete example for the four discussed text decoration properties.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div-content {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: dashed;
text-decoration-thickness: 5px;
}
.p-content {
text-decoration: line-through dotted blue 5px;
/* Syntax: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> || <'text-decoration-thickness'> */
}
</style>
</head>
<body>
<script>
</script>
<div class="div-content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</div>
<p class="p-content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</p>
</body>
</html>
No comments:
Post a Comment