Linked text hover effect

This article fits the ART, SEA, Arnold, theme.

If you want to use the hover effect like the menu item. Please follow the guide.

We cannot define a general CSS to add the hover effect for ALL linked text by default. Because it can cause other unpredictable problems. The better way is that it should be defined by the custom CSS with a specified class name. Add a class within the HTML tag a.

For the text in the Text module, you should add a class hoverline by the HTML code mode. The HTML should like:

<a href="xxx" class="hoverline">Linked Text</a>

For the text in the footer bar, please add the class hoverline by HTML in Copyright and Text element.

Please add the custom CSS code to “Appearance > Customize: Additional CSS”.

The effect of hover line under the text:

a.hoverline::before,
.footer-menu a::before {
	content: "";
	position: absolute;
	bottom: -9px; /* Spacing between line and text*/
	left: 0;
	width: 100%;
	height: 2px; /* Border width of the line*/
	background-color: currentColor;
	-webkit-transform: scale3d(0, 5, 1);
	transform: scale3d(0, 5, 1);
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9);
	transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9);
}
a.hoverline:hover::before,
.footer-menu a:hover::before {
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}

The effect of slash line cross the text:

a.hoverline::before,
.footer-menu a::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	width: 70px; /* Border length of the line*/
	height: 4px; /* Border width of the line*/
	background-color: currentColor;
	background-color: var(--menu-hover-diagonalline-color, currentColor);
	-webkit-transform: rotate3d(0, 0, 1, -45deg) scale3d(0, 1, 1) translate(-50%, -50%);
	transform: rotate3d(0, 0, 1, -45deg) scale3d(0, 1, 1) translate(-50%, -50%);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transition: -webkit-transform .4s;
	transition: transform .4s;
}

a.hoverline:hover::before,
.footer-menu a:hover::before {
	-webkit-transform: rotate3d(0, 0, 1, -45deg) scale3d(1, 1, 1) translate(-50%, -50%);
	transform: rotate3d(0, 0, 1, -45deg) scale3d(1, 1, 1) translate(-50%, -50%);
}

The effect of “shot”:

a.hoverline::before,
.footer-menu a::before,
a.hoverline::after,
.footer-menu a::after {
	content: "";
	position: absolute;
	width: 0.5em;
	height: 0.5em;
	opacity: 0;
	border: 2px solid currentColor;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.17, 0.67, 0.05, 1.29);
	transition-timing-function: cubic-bezier(0.17, 0.67, 0.05, 1.29);
}

a.hoverline::after,
.footer-menu a::after {
	right: -.5em;
	bottom: -.5em;
	border-width: 0 2px 2px 0;
	-webkit-transform: translate3d(-0.5em, -0.5em, 0);
	transform: translate3d(-0.5em, -0.5em, 0);
}

a.hoverline::before,
.footer-menu a::before {
	top: -.5em;
	left: -.5em;
	border-width: 2px 0 0 2px;
	-webkit-transform: translate3d(0.5em, 0.5em, 0);
	transform: translate3d(0.5em, 0.5em, 0);
}

a.hoverline:hover::before,
.footer-menu a:hover::before,
a.hoverline:hover::after,
.footer-menu a:hover::after {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}