Style of underline overline links by defining style using CSS

We can remove underline from the anchored text links by defining the style locally this will over ride the setting of CSS file. We will use the local style command text-decoration: none; to remove the underline. Here are some examples of this. Let us start with an example of simple link with underline. We will first display the link and then below that the code. Same way the link without underline is displayed and then the code below it.

This is a link with underline

<a 'https://www.plus2net.com/html_tutorial/css_underline.php'>This is a link with underline</a>

This is a link without underline

<a href='https://www.plus2net.com/html_tutorial/css_underline.php' style='text-decoration: none;'>This

is a link without underline</a>

Here we have used style='text-decoration: none;' to remove the underline from the link

text-decoration: overline

This is a link with overline

<a style="text-decoration: overline" href="https://www.plus2net.com/html_tutorial/css_underline.php">This
is a link with overline</a>

text-decoration: line-through

This is a link with line-through

<a style="text-decoration: overline" href="https://www.plus2net.com/html_tutorial/css_underline.php">This
is a link with line-through</a>

text-decoration: underline overline

This is a link with underline overline

<a style="text-decoration: underline overline" href="https://www.plus2net.com/html_tutorial/css_underline.php">This
is a link with underline overline</a>

text-decoration: underline overline dotted blue

This is a link with underline overline

<a style="text-decoration: underline overline dotted blue" href="https://www.plus2net.com/html_tutorial/css_underline.php">This
is a link with underline overline</a>

text-decoration: underline overline dotted red

This is a link with underline overline

<a style="text-decoration: underline overline dotted red" href="https://www.plus2net.com/html_tutorial/css_underline.php">This
is a link with underline overline red</a>

text-decoration: underline overline double red

This is a link with underline overline double red

<a style="text-decoration: underline overline double red" href="https://www.plus2net.com/html_tutorial/css_underline.php">This
is a link with underline overline double red</a>

text-decoration: underline overline wavy green

This is a link with underline overline wavy green

<a style="text-decoration: underline overline wavy green" href="https://www.plus2net.com/html_tutorial/css_underline.php">This
is a link with underline overline wavy green</a>

text-decoration: underline overline dashed green

This is a link with underline overline wavy green

<a style="text-decoration: underline overline dashed green" href="https://www.plus2net.com/html_tutorial/css_underline.php">This
is a link with underline overline dashed green</a>

Buttons as Links

CSS code Generator Types of CSS Font with CSS
HTML Meta Tags BODY tag

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

CSS with text-decoration for links

text-decoration: overline

text-decoration: line-through

text-decoration: underline overline

text-decoration: underline overline dotted blue

text-decoration: underline overline dotted red

text-decoration: underline overline double red

text-decoration: underline overline wavy green

text-decoration: underline overline dashed green

Subhendu Mohapatra