CSS is used set style for the HTML elements. The CSS text-decoration can be used to underline an HTML element generally text, paragraph, headers, etc. In this tutorial we examine different text underline examples with the CSS text-decoration.
Text Underline
The <p> tag can be used to underline text using CSS. The text-decoration can be provided as style like below.
<html>
<head>
</head>
<body>
This is <span style="text-decoration:underline">text</span> where some part of it underlined.
<p style="text-decoration:underline">This is text where completely underlined.</p>
</body>
</html>
Header Underline
The CSS can be also used to underline headers like below.
<html>
<head>
</head>
<body>
<h1 style="text-decoration:underline">This is header</h1>
</body>
</html>
Overline
Alternative to the underline is the over-the-line. The overline simply draws lines over the HTML elements like over the text or header. The text-decoration attribute is set as overline .
<html>
<head>
</head>
<body>
This is <span style="text-decoration:overline">text</span> where some part of it overlined.
<p style="text-decoration:overline">This is text where completely overlined.</p>
</body>
</html>