How do I underline, overline, anyline in CSS?

Question

I had no problem italicizing, but when it came time to underline or over line I couldn't figure it out.

   <!DOCTYPE html>
    <html>
    <body>
    <head>
    <title>CSS Properties</title>
    <style>

    </style>
    </head>
    </body>
    <h1>CSS Properties Quiz</h1>
    <p style="font-style: italic;">
      This is how you italicize in CSS.
    </p>
    <p>
      You can also <em>italicize</em> using <em>html</em>.
    </p>

    <p class="under">
    I hope that this underlines the text.
    </p>
    <p class="over">
      Will this overline? Probably not.
    </p>

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration — Temani Afif, Apr 13 '20 at 23:02

score 2 · Answer 1 · answered Apr 13 '20 at 23:03

2

Use for example:

<p style="font-style: italic; text-decoration: overline;">

See great resource on CSS: https://www.w3schools.com/css/css_text_decoration.asp

answered Apr 13 '20 at 23:03

Marek Bettman

177
1
5

If you put styles inline like this with `style="…"`, instead of in a stylesheet or at least a `` block — you will live to regret it. – Stephen P Apr 14 '20 at 00:46

score 0 · Answer 2 · answered Apr 14 '20 at 00:52

With the classes under and over that you have added to the blocks you want styled that way, you just need to supply style rules using text-decoration attributes.

These would generally go in a separate CSS file which you reference in your html file, like
<link rel="stylesheet" type="text/css" href="yourstyles.css">

or you could put them in a <style> . . . </style> block in your html; but it's generally considered better practice to use separate stylesheet files.

p.under {
    text-decoration: underline;
}
p.over {
    text-decoration: overline;
}

<!DOCTYPE html>
    <html>
    <body>
    <head>
    <title>CSS Properties</title>
    <style>

    </style>
    </head>
    </body>
    <h1>CSS Properties Quiz</h1>
    <p style="font-style: italic;">
      This is how you italicize in CSS.
    </p>
    <p>
      You can also <em>italicize</em> using <em>html</em>.
    </p>

    <p class="under">
    I hope that this underlines the text.
    </p>
    <p class="over">
      Will this overline? Probably not.
    </p>

How do I underline, overline, anyline in CSS?

2 Answers2