<!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
@import 'https://fonts.googleapis.com/css?family=Lora:400,700';

* {
    box-sizing: border-box;
}

html, body {
    font-family: 'Lora', serif;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

body {
    border: 8px solid #00B388;
}

a {
    cursor: pointer;
}

strong {
    margin-top: 16px;
    display: block;
    font-weight: 700;
}

p {
    padding: 24px;
    max-width: 760px;
    font-size: 22px;
    font-weight: 300;
    line-height: 1.9;
}

.link-1 {
    position: relative;
    text-decoration: none;
    display: inline-block;
    color: black;
    padding: 0 1px;
    transition: color ease 0.3s;
}

    .link-1::after {
        content: '';
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 5%;
        left: 0;
        bottom: 0;
        background-color: #00B388;
        transition: all ease 0.3s;
    }

    .link-1:hover {
        color: white;
    }

        .link-1:hover::after {
            height: 100%;
        }

.link-2 {
    position: relative;
    text-decoration: none;
    display: inline-block;
    color: black;
    padding: 0 1px;
    transition: color ease 0.3s;
}

.link-2::before, .link-2::after {
	content: '';
	position: absolute;
	background-color: #00B388;
	z-index: -1;
	height: 5%;
}

.link-2::before {
	width: 0%;
	left: 0;
	bottom: 0;
	transition: width ease 0.4s;
}

.link-2::after {
	width: 100%;
	left: 0;
	bottom: 0;
	transition: all ease 0.6s;
}

.link-2:hover::before {
	width: 100%;
}

.link-2:hover::after {
	left: 100%;
	width: 0%;
	transition: all ease 0.2s;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<p>
  <a>HTML </a> <a class="link-1" href="#">Best</a> Codes.<br>HTML<a class="link-2">Best</a> Free" <strong>Codes</strong>
</p>
<font face="Tahoma"><a target="_blank" href="http://www.htmlfreecode.com/"><span style="font-size: 8pt; text-decoration: none">HTML Free Code</span></a></font><a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>