スタッフブログ

マウスオーバーで
伸びるアンダーライン

2020年2月21日

ナビゲーションでよく見かけるものです。

transform-origin を left や right に変更すれば動きが変わります。

a{
	color:#333;
	display:inline-block;
	position:relative;
	text-decoration:none;
}
a:before{
	background:#c00;
	content:'';
	height:2px;
	width:100%;
	position:absolute;
	left:0;
	bottom:-3px;
	transform:scale(0,1);
	transform-origin:center;
	transition:.6s;
}
a:hover:before{
	transform:scale(1);
}

ホームページ制作を承ります

相模原市にある会社・店舗・事務所様からのご依頼大歓迎！

【士業】: 弁護士(法律事務所)，公認会計士，税理士，司法書士，行政書士，社会保険労務士など
【住まい】: 不動産，工務店，建設・建築会社，設計事務所，リフォーム会社，建物管理会社，電気工事，水道工事など
【乗り物】: 中古車ショップ，バイクショップ，自転車ショップ，自動車整備，運転代行など
【飲食業】: レストラン，カフェ，甘味処，洋菓子店，パン屋など
【医療・福祉】: 病院，クリニック，歯科医，整体院，接骨院，介護センターなど
【美容・健康】: トレーニングジム，エステサロン，ネイルサロン，美容院，美容室など
【教育・育児】: 専門学校，学習塾，幼稚園，保育園，認定保育園，カルチャースクール，パソコン教室など
【その他】: イベントサイト，産業廃棄事業，リサイクルショップ，雑貨店，ペットショップ，旅館，楽天市場店舗・Yahoo!ストア・MakeShopなど
【外注元】: デザイン事務所、広告代理店、ホームページ制作会社など

上記以外の業種でもホームページ制作・WEBシステム/アプリケーション開発につきましては、神奈川県相模原市中央区にあるオフィス木蓮までお気軽にご連絡・お問い合わせください。スマートフォン・タブレット対応、WordPress によるホームページ制作もお任せ下さい。他社が制作されたホームページでも対応します。また、ウェブアクセシビリティ(Webアクセシビリティ)対応のご相談も承ります。

スタッフブログ

マウスオーバーで伸びるアンダーライン

ホームページ制作を承ります

相模原市にある会社・店舗・事務所様からのご依頼大歓迎！

マウスオーバーで
伸びるアンダーライン