Underlines

by Erfan Paslar

Posted on: 2021-04-18


Underlines

2 minutes read.

 

There are some nice things you can add to your text to look better, but first, read the adding HTML section.

solid dotted dashed wavy overline underline-overline thin normal thick double

 

For adding those you should do as following:

  1. open an HTML snippet.
  2. for example, you want to use one in a paragraph(p) so open and close a p tag(<p></p>)
  3. for example, we want to use a wavy underline. so where ever inside your text that you want to underline wrap it inside a span(<span></span>) with the classes named underline wavy.
  4. Done

for example, we want to make this line: 

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

the code inside the HTML snippet is like below:

<p>
Lorem ipsum dolor sit <span class="wavy underline">amet</span>, consectetur adipiscing elit.
</p>

 

List of text decorations:

solid dotted dashed wavy overline underline-overline thin normal thick double

 

solid

<span class="underline solid">solid</span>

 

dotted

<span class="underline dotted">dotted</span>

 

dashed

<span class="underline dashed">dashed</span>

 

wavy

<span class="underline wavy">wavy</span>

 

overline

<span class="underline overline">sooverlinelid</span>

 

underline-overline

<span class="underline underline-overline">underline-overline</span>

 

thin

<span class="underline thin">thin</span>

 

normal

<span class="underline normal">normal</span>

 

thick

<span class="underline thick">thick</span>

 

double

<span class="underline double">double</span>

 

Want some padding?!

If you think the underline is very close to the letters you can use offset class.

for example:

<h3><span class="underline double offset">double</span></h3>

will be:

double

P.S. some of them might not work on mobile devices.


Tags:

Leave a Comment: