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.
For adding those you should do as following:
- open an HTML snippet.
- for example, you want to use one in a paragraph(
p
) so open and close a p tag(<p></p>
) - 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 namedunderline wavy
. - Done
for example, we want to make this line:
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:
<span class="underline solid">solid</span>
<span class="underline dotted">dotted</span>
<span class="underline dashed">dashed</span>
<span class="underline wavy">wavy</span>
<span class="underline overline">sooverlinelid</span>
<span class="underline underline-overline">underline-overline</span>
<span class="underline thin">thin</span>
<span class="underline normal">normal</span>
<span class="underline thick">thick</span>
<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:
P.S. some of them might not work on mobile devices.