Compare text-decoration in HTML and CSS

Description

The following code shows how to compare text-decoration.

Example


<!--  www .ja  v  a2s.c  o m-->






<html>
<head>
<title>text-decoration</title>
<style type='text/css'>
body {
font: 14px sans-serif;
}
p {
padding: 5px 25px;
background: lightblue;
border: 1px solid black;
}
span.underline {
text-decoration: underline;
}
span.overline {
text-decoration: overline;
}
span.line-through {
text-decoration: line-through;
}
span.blink {
text-decoration: blink;
}
span.underover {
text-decoration: underline overline;
}
span.underthrough {
text-decoration: underline line-through;
}
span.overthrough {
text-decoration: overline line-through;
}
span.example {
background: mistyrose;
}
</style>


</head>
<body>
<h4>CSS's text-decoration Property</h4>
<p>
<span class='underline example'>underline</span>,
<span class='overline example'>overline</span>,
<span class='line-through example'>line-through</span>,
<span class='blink example'>blink</span>.
<span class='blink example'>blink</span>
</p>
<p>
<span class='underover example'>underline and overline text</span>
<span class='underthrough example'>underline and line-through text</span>
<span class='overthrough example'>overline and line-through text</span>
</p>
</body>
</html>

Click to view the demo

The code above generates the following result.

Home »
  HTML CSS Tutorial »
    Text »
      CSS Text Style

...
Set letter-spacing to negative value in HTM...
Set letter-spacing to normal in HTML and CS...
Compare line-height:normal, 18px, 1.5em, 1....
Compare line height settings in HTML and CS...
Set font-size and line-height in HTML and C...
Set line height for a paragraph in HTML and...
Set line height to 1em in HTML and CSS
Set line-height to 1.4em in HTML and CSS
Set line height to 3em in HTML and CSS
Set line-height to 75% in HTML and CSS
Set line height with various measurements i...
Set paragraph line-height to 150% in HTML a...
Compare text-align all possible values in H...
Set text-align to center in HTML and CSS
Set text-align to justify in HTML and CSS
Set text align to justify to paragraph in H...
Set text-align to left in HTML and CSS
Set text-align to right in HTML and CSS

Compare text-decoration in HTML and CSS

Set text-decoration to line-through in HTML...
Set text-decoration to none for visited anc...
Set text-decoration to overline in HTML and...
Set text-decoration to underline in HTML an...
Set text-decoration to underline overline i...
Set text-decoration to underline overline l...
Compare text-transform in HTML and CSS
Set text-transform to capitalize in HTML an...
Set text-transform to lowercase in HTML and...
Set text-transform to uppercase in HTML and...
Compare all vertical-align settings in HTML...
Compare vertical-align possible values in H...
Compare vertical align values in HTML and C...
Set vertical align for table cells in HTML ...
Set vertical-align to 300% in HTML and CSS
Set vertical-align to 69px in HTML and CSS
Set vertical-align to baseline in HTML and ...
Set vertical align to bottom in HTML and CS...
Set vertical-align to middle in HTML and CS...
...