Inspiration for Inline Anchor Styles

Today we have some more inspiration for you! This time we’ve thought about some creative and modern styles for inline anchors, i.e. links that are in the text flow. These anchors are somewhat restricted because they are surrounded by other text, and so we can’t just apply any kind of layout or effect to them due to their limited surrounding space. But there are some interesting things we can do to them and you’ve surely spotted already some of these around the web. We thought we’d give you some more inspiration of hover styles and effects, mostly involving pseudo-elements trickery and also some SVG magic (last two styles).

Please note that this is for your inspiration, so make sure to view it with a state-of-the-art browsers. Some browsers don’t support transitions on pseudo-elements.

Sadly, Firefox does strange things to text when it’s transitioned (especially when using scale), so you might see some flickering there. IE11 also does not seem to know how to translate an element using calc, so one of the effects will be shown wrongly.

For most of the styles, we just use a normal anchor and then we do something to its pseudo-elements ::before and ::after. Some of the anchors also need a data attribute and some include a SVG.

For achieving the desired stacking of the anchors and their pseudo-elements, we need to set some general styles:

section {
	position: relative;
	z-index: 1; /* needed for setting pseudo-element z-index */
	backface-visibility: hidden;
}

section a {
	outline: none;
	color: #404d5b;
	text-decoration: none;
	white-space: nowrap;
	position: relative;
	display: inline-block;
	vertical-align: bottom;
}

section a::before,
section a::after {
	pointer-events: none;
	backface-visibility: hidden;
}

Setting the anchor that we want to style, to inline-block allows us to treat it like a block element while still maintaining it in the flow of text.

An example for a style is the following 3D flip effect:

.link-flip a {
	font-weight: 500;
	perspective: 600px;
	perspective-origin: 50% 100%;
	transition: color 0.3s;
}

.link-flip a:hover,
.link-flip a:focus {
	color: #e74c3c;
}

.link-flip a::before,
.link-flip a::after {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: -4px;
	z-index: -1;
	box-sizing: content-box;
	padding: 0 4px;
	content: '';
}

.link-flip a::before {
	background-color: #fff;
	transition: transform 0.2s;
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transform: rotateX(90deg);
	transform-origin: 50% 100%;
}

.link-flip a:hover::before,
.link-flip a:focus::before {
	transform: rotateX(0deg);
}

.link-flip a::after {
	border-bottom: 2px solid #fff;
}

We use the anchor itself as a perspective wrapper and apply a 3D rotation to the ::before pseudo-element. Initially it’s rotated 90 degrees (so that it’s invisible) and when we hover, we rotated it back so that we can see it. The ::after pseudo-element is used to simulate the lateral down side of the rotated pseudo-element.

We hope you enjoy these little styles and find them inspiring!

Credits: Arrow icon arrow_right.svg by P.J. Onori licensed under CC BY-NC 3.0 NL. Link icon from the Feather icon set by Cole Bemis licensed under CC BY 3.0.