Hover effect using border

19.04.01 #lessons

Here's a technique I like to use for creating more visually creative hover effects...

Hover Over Me

How is it done ? With borders and pseudo elements actually, lets walk through it. 😃

The Steps

1. The html/css

Let's start with:

<div id="hover-border">Hover Over Me</div>

#hover-border{
	position:relative;
	display:inline;
}

A breakdown of what we are doing with these properties/values ...

`#hover-border`	What it means
`position:relative;`	This will control where the upcoming `::before` element will place itself (We'll see this in a sec).
`display: inline;`	Is used so that the size of the element will only be as large as the content itself.

2. The ::before element

Every html element has two not-so-secret elements (::before and ::after) to help add static content around your element. In this case we will set up the ::before element with the following...

#hover-border::before{
  position:absolute;
  content: '';
  width:0;
  height:100%;
  border-bottom:4px solid orange;
}

What is each property here helping acheive?

`#hover-border::before`	What it means
`position:absolute;`	Allows the `::before` element to 'float' within the confines of the `#hover-border`. If `#hover-border` didnt define a `position: relative;` value this element could potentially move anywhere on the page.
`content: '';`	Required for any pseudo-element to indicate what the static content will be otherwise the element will not show. We fake the content here with an empty string.
`width: 0;`	Start off by 'hiding' the element and later modifying the `width` value to display the element.
`height:100%;`	This will size the element to be the same as `#hover-border`.
`border-bottom:4px solid orange;`	This is our border lying in wait until a width value > 0 is added. Soon!

3. The hover effect

Now we need to add the logic of what the ::before element will do when its parent #hover-border is hovered over...

#hover-me:hover::before{
	transition: width .5s linear;
	width:100%;
}

`#hover-me:hover::before`	What it means
`transition: width .5s linear;`	When you hover over the `#hover-me` element add a `transition` property that will animate any change to the `width` of the `::before` element and make it last for `.5s` with `linear` movement. Phew!
`width:100%;`	And since the width value is set to 100%, we will see it grow from 0 to 100%, and as a consequence reveal the border !

4. All together

#hover-me{
	position:relative;
	display:inline;
	font-family: 'Titillium Web', sans-serif;
	color: orange;
	font-size: 2rem;
}
#hover-me::before{
	content: '';
	position:absolute;
	width:0;
	height:100%;
	border-bottom:4px solid orange;	
}
#hover-me:hover::before{
	transition: width .5s linear;
	width:100%;
}

<div id="hover-me">Hover Over Me</div>

Hover Over Me

~ Zano

# Hover effect using border

# The Steps

# 1. The html/css

# 2. The ::before element