What is Link underline generator?

Collection of more than 16+ effects for links underline with CSS source code for each of it. Just paste generated CSS code to your HTML page, and you'll see how it cool looks.

Table of effects:
  • Clear any underline effects
  • Single underline link
  • Double underline link
  • Double underline link with border method
  • Dotted underline link
  • Dashed underline link
  • Colored underline link
  • Smooth background link
  • Move right link effect
  • Subtle glow link effect
  • Adding Text shadow for links on hover
  • Left to Right animated underline
  • Right to Left animated underline
  • Left to Right animated upperline
  • Animated underline from center
  • Pulse effect for links
  • Wave effect


Clear any underline effects

Example:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


CSS code:
#t1 a {
	text-decoration: none; 
	border-bottom: 0px;
}

Single underline link

Example:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


CSS code:
#t2 a {
	text-decoration: underline;
}

Double underline link

Example:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


CSS code:
#t3 a {
	text-decoration: underline double;
}

Double underline link with border method

Example:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


CSS code:
#t4 a {
	text-decoration: none;
	border-bottom: 3px double;
}

Dotted underline link

Example:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


CSS code:
#t5 a {
	text-decoration: none;
	border-bottom: 1px dotted;
}

Dashed underline link

Example:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


CSS code:
#t6 a {
	text-decoration: none;
	border-bottom: 1px dashed;
}

Colored underline link

Example:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


CSS code:
#t7 a{
	text-decoration: none;
}
#t7 a:nth-child(1) {
	border-bottom: 2px solid red;
}
#t7 a:nth-child(2) {
	border-bottom: 2px solid green;
}
#t7 a:nth-child(3) {
	border-bottom: 2px solid blue;
}

Smooth background link

Example:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


CSS code:
#t8 a{
	text-decoration: none;
	padding: 5px;
	transition: 0.5s;
	color: #990000;
	transition: color .2s ease-out, background 0.5s ease-in;
}
#t8 a:hover{
	color: #FFFFFF;
	background-color: #336699;
	text-shadow: none;
}

Move right link effect

Example:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


CSS code:
#t9 a{
	color: #FFFFFF;
	font-family: 'PT Sans Narrow';
	background-color: #37A1E8;
	text-shadow: none;
}
#t9 a:hover{
	padding-left: 25px;
	background-color: #37A1E8;
	transition: all 0.5s;
}

Subtle glow link effect

Example:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


CSS code:
#t10 a:hover{
	text-shadow: 0 0 15px #37A1E8;
	transform: scale(1.05);
	transition: all 0.5s;
}

Adding Text shadow for links on hover

Example:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


CSS code:
#t11 a:hover{
	text-shadow: 2px 2px 7px #777;
	transition: all 0.5s;
}

Left to Right animated underline

Example:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


CSS code:
#t12 a {
  text-decoration: none;
  position: relative;
}
#t12 a::before {
  content: '';
  bottom: 0;
  right: 0;
  position: absolute;
  width: 0%;
  height: 2px;
  background-color: #F03E40;
  transition: 0.2s;
}
#t12 a:hover:before {
  width: 100%;
  left: 0;
}

Right to Left animated underline

Example:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


CSS code:
#t13 a {
  text-decoration: none;
  position: relative;
}
#t13 a::before {
  content: '';
  bottom: 0;
  right: 0;
  position: absolute;
  width: 0%;
  height: 2px;
  background-color: #F03E40;
  transition: 0.2s;
}
#t13 a:hover:before {
  width: 100%;
}

Left to Right animated upperline

Example:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


CSS code:
#t14 a {
  text-decoration: none;
  position: relative;
}
#t14 a::before {
  content: '';
  top: 0;
  right: 0;
  position: absolute;
  width: 0%;
  height: 2px;
  background-color: #F03E40;
  transition: 0.2s;
}
#t14 a:hover:before {
  width: 100%;
  left:0;
}

Animated underline from center

Example:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


CSS code:
#t15 a {
  text-decoration: none;
  position: relative;
}
#t15 a::before {
  content: '';
  bottom: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #F03E40;
  transition: 0.2s;
  transform: scaleX(0);
}
#t15 a:hover:before {
	transform: scaleX(1);
}

Pulse effect for links

Example:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


CSS code:
#t16 a {
  text-decoration: none;
  position: relative;
}
#t16 a::before {
  content: '';
  bottom: 0;
  right: 0;
  position: absolute;
  width: 0%;
  height: 100%;
  background-color: #F03E40;
  transition: 0.2s;
}
#t16 a:hover:before {
  width: 100%;
  left: 0;
  background-color: #F03E4022;
}

Wave effect

Example:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


CSS code:
#t17 a {
	text-decoration-style: wavy;
}

Comment, please, and ask effect you need, I will add it