<head>
<title>CSS Test: Text Decoration with first-line pseudo element</title>
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo">
<style type="text/css">
#div1:first-line
{
font: 24px sans-serif;
color: gray;
letter-spacing: 5px;
text-decoration: underline;
line-height: 48px;
}
#div2:first-line
{
font: 24px sans-serif;
color: gray;
letter-spacing: 5px;
text-decoration: overline;
line-height: 48px;
}
#div3:first-line
{
font: 24px sans-serif;
color: gray;
letter-spacing: 5px;
text-decoration: line-through;
line-height: 48px;
}
div {
color: green;
}
p {
font-weight:bold;
}
</style>
</head>
<body>
<h2>Test case for First-line text-decoration style</h2>
<p> Text-decoration UNDERLINE : Only the first line must have an underline.
<div id="div1">Underline Underline Underline Underline<br> Underline Underline Underline Underline<br> Underline Underline Underline Underline </div>
<br>
</p>
<p> Text-decoration OVERLINE : Only the first line must have an overline.
<div id="div2">Overline Overline Overline Overline<br> Overline Overline Overline Overline<br> Overline Overline Overline Overline </div>
<br>
</p>
<p> Text-decoration LINE-THROUGH : Only the first line must have a line through it.
<div id="div3">Line-Through Line-Through Line-Through Line <br> Line-Through Line-Through Line-Through Line-Through<br> Line-Through Line-Through Line-Through Line-Through </div>
<br>
</p>
</body>
Codebase Browser
chromium