Expanding Line on hover

Whats the best way of recreating the expanding line that appears under the header items on this site?

I know how to make a line appear on hover, but the way that it expands like on the example site looks cooler.

Hi @AlexKehoe

Create yourself an HTML element and pop this inside it.
You can change the values for colours, font etc.

<style>    
    
    h1 { color: #666;display:inline-block; margin:0;text-transform:uppercase; }
	h1:after {
  		display:block;
  		content: '';
  		border-bottom: solid 3px #019fb6;  
  		transform: scaleX(0);  
  		transition: transform 250ms ease-in-out;
	}

    h1:hover:after { transform: scaleX(1); }

</style>
    
<h1 class="fromCenter">Expand from center</h1><br/>
1 Like

Thank you very much. That appears to have done the trick apart from these couple of points:

How do I adjust the line so that it sits slightly further below the text?
Previously my menu text triggered a workflow. How do I do this with the HTML element instead?

I amended your HTML as follows for my site btw:

#

h1 { color: #FFFFFF;display:inline-block; margin:0;text-transform:none; }
h1:after {
	display:block;
	content: '';
	border-bottom: solid 2px #2CF69C;  
	transform: scaleX(0);  
	transition: transform 200ms ease-in-out;
}

h1:hover:after { transform: scaleX(0.75); }

Solutions


Hi,

No probs.

If you add the following line in then it should do the trick.

padding-bottom: 3px;

To make the element run a workflow when clicked, put the HTML element into a group of it’s own, and then have a workflow saying ‘When Group is clicked’. Should do the trick.

Amazing I reckon that should do the trick. Thank you very much for your help :slight_smile:

Your welcome :slight_smile:

This topic was automatically closed after 70 days. New replies are no longer allowed.