中心から外に線が伸びる（下部）：

CSS のscale を使って、hoverをした時に線をX（横）方向に延ばす。
位置は絶対配置position:absolute; で指定する。

HTMLの書き方:

• head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/5-3-1.css">

</head>

• body内のテキストナビゲーションを表示させたい場所に以下のHTMLを記載します。

<ul class="gnavi">

<li class="current"><a href="#">Home</a></li><!--現在地にはcurrentクラスを付ける-->

<li><a href="#">About</a></li>

<li><a href="#">Service</a></li>

<li><a href="#">Contact</a></li>

</ul>

自作のCSS内の書き方:

/*==================================================

共通　横並びのための設定
===================================*/

.gnavi{
    display: flex;
    flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
    margin:0 0 50px 0;
    list-style: none;
}

.gnavi li a{
    display: block;
    padding:10px 30px;
    text-decoration: none;
    color: #333;
}

.gnavi li{
    margin-bottom:20px;
}

/*==================================================
　5-3-1 中心から外に線が伸びる（下部）
===================================*/

.gnavi li a{
    /*線の基点とするためrelativeを指定*/
	position: relative;
}

.gnavi li.current a,
.gnavi li a:hover{
	color:#0481A2;
}

.gnavi li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 10%;
    /*線の形状*/
    width: 80%;
    height: 2px;
    background:#0481A2;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}

左から右に背景が伸びる：
CSS を使って、hover したときに要素の横幅・縦幅・不透明度を変更する。
自作のCSS内の書き方:
/*==================================================
共通　横並びのための設定
===================================*/

.gnavi{
    display: flex;
    flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
    margin:0 0 50px 0;
    list-style: none;
}

.gnavi li a{
    display: block;
    padding:10px 30px;
    text-decoration: none;
    color: #333;
}

.gnavi li{
    margin-bottom:20px;
}

/*==================================================
　5-3-5 左から右に背景が伸びる
===================================*/

/*背景の設定*/

.gnavi li a{
    /*背景色の基点とするためrelativeを指定*/
	position: relative;
}

.gnavi li a::after {
	content: '';
    /*絶対配置で線の位置を決める*/
	position: absolute;
	z-index: -1;
	bottom: 0;
	left: 0;
    /*背景の形状*/
	width: 0;
	height:100%;
	background:#0481A2;
    /*アニメーションの指定*/
	transition:all .5s;
	opacity: 0;/*はじめは透過0*/
}

/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
    /*背景の形状*/
	width: 100%;/*横幅を伸ばす*/
	opacity: 1;/*不透明に*/
}

.gnavi li.current a,
.gnavi li a:hover{
  	color: #fff;
}

テキストが入れ替わる：
CSS を使い、絶対配置で中央寄せにした上下のテキストの下部分をoverflow:hidden; で隠す。
hoverをしたらtransform を使ってY方向にテキストを移動させて出現させる。

自作のCSS内の書き方:
/*==================================================
共通　横並びのための設定
===================================*/

.gnavi{
    display: flex;
    flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
    margin:0 0 50px 0;
    list-style: none;
}

.gnavi li a{
    display: block;
    text-decoration: none;
    color: #333;
}

.gnavi li{
    margin-bottom:20px;
}

/*==================================================
　5-3-9 テキストが入れ替わる
===================================*/


.gnavi li a{
    /*テキストの基点とするためrelativeを指定*/
	position: relative;
    /*はみ出る要素を隠す*/
	overflow: hidden;
	padding:10px 60px;
}

.gnavi li span{
    /*絶対配置でテキストの位置を決める*/
	position: absolute;
	left: 50%;
	top:0;
    /*アニメーションの指定*/
	transition: all .5s;
	transform: translate(-50%, 0);/*X方向に-50% ※中央寄せにするため*/
  /*ブロック要素にして透過なし、テキスト折り返しなし*/  
	display: block;
	opacity:1;
	white-space: nowrap;
}

/*差し替わるテキストの設定*/
.gnavi li span:nth-child(2){
	opacity:0;/*透過0に*/
    transform: translate(-50%,100%);/*X方向に-50% Y方向に100%*/
}

/*hoverするとテキストが入れ替わる設定*/
.gnavi li:hover span:nth-child(1){
	opacity:0;/*透過0に*/
    transform: translate(-50%,-100%);/*X方向に-50% Y方向に-100%*/
}

.gnavi li:hover span:nth-child(2){
	opacity:1;/*不透明に*/
	transform: translate(-50%, 0);/*X方向に-50% Y方向に0*/
}

線が伸びて枠線になる：
CSS で<li>と<span>の疑似要素（before とafter）に縦横幅を0 にした線を設定する。
hover すると疑似要素の横幅・縦幅が100% に伸びて線が表示される。
線が伸びるタイミングはtransition-delay で少しづつ遅らせる
自作のCSS内の書き方:
/*==================================================
共通　横並びのための設定
===================================*/

.gnavi{
    display: flex;
    flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
    margin:0 0 50px 0;
    list-style: none;
}

.gnavi li a{
    display: block;
    padding:10px 30px;
    text-decoration: none;
    color: #333;
}

/*==================================================
　5-3-10 線が伸びて枠線になる
===================================*/

.gnavi li{
    /*線の基点とするためrelativeを指定*/
  position: relative;
    margin:0 10px;
}

/*線の基点位置*/
.gnavi li::before,
.gnavi li::after{
    content:"";
    /*絶対配置で線の位置を決める*/
    position: absolute;
    background:#0481A2;
    /*線の形状*/
    width: 0;
    height:2px;
    /*アニメーションの指定*/
    transition: all 0.2s linear;
}

.gnavi li::before{
  right: 0;
  bottom: 0;
}

.gnavi li::after{
  left: 0;
  top: 0;
}

/*線の基点位置2 spanタグ*/

.gnavi li span{
    display: block;
}

.gnavi li span::before,
.gnavi li span::after{
  content:"";
    /*絶対配置で線の位置を決める*/
  position: absolute;
  background: #0481A2;
    /*線の形状*/
  width:2px;
  height:0;
/*アニメーションの指定*/
  transition: all 0.1s linear;
}

.gnavi li span::before{
  left: 0;
  bottom: 0;
}

.gnavi li span::after{
  right: 0;
  top: 0;
}

/*現在地とhoverした際の線の変化*/
.gnavi li.current::before,
.gnavi li.current::after,
.gnavi li:hover::before,
.gnavi li:hover::after{
  width: 100%;
}

.gnavi li:hover::after{
  transition-delay: 0s;/*すぐ線を出現させる*/
}

.gnavi li:hover::before{
  transition-delay: 0.3s;/*線の出現を0.3秒遅らせる*/
}

.gnavi li.current span::before,
.gnavi li.current span::after,
.gnavi li:hover span::before,
.gnavi li:hover span::after{
  height: 100%;
}

.gnavi li:hover span::before{
  transition-delay: 0.5s;/*線の出現を0.5秒遅らせる*/
}

.gnavi li:hover span::after{
  transition-delay: 0.2s;/*線の出現を0.2秒遅らせる*/
}
中心から外に線が伸びる（中央）:
CSS のscale を使って、hoverをした時に線をX（横）方向に延ばす。
位置は絶対配置position:absolute; で指定する。

自作のCSS内の書き方:
/*==================================================
共通　横並びのための設定
===================================*/

.gnavi{
    display: flex;
    flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
    margin:0 0 50px 0;
    list-style: none;
}

.gnavi li a{
    display: block;
    padding:10px 30px;
    text-decoration: none;
    color: #333;
}

.gnavi li{
    margin-bottom:20px;
}

/*==================================================
　5-3-2 中心から外に線が伸びる（中央）
===================================*/
.gnavi li a{
    /*線の基点とするためrelativeを指定*/
	position: relative;
}

.gnavi li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    top:50%;
    left: 10%;
    /*線の形状*/
    width: 80%;
    height: 1px;
    background: #666;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}

円が線に変化:
CSS のscale を使い、hover すると円の形になっていた線をX（横）方向にのばす。位置は絶対配置position:absolute; で指定する。

自作のCSS内の書き方:
/*==================================================
共通　横並びのための設定
===================================*/

.gnavi{
    display: flex;
    flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
    margin:0 0 50px 0;
    list-style: none;
}

.gnavi li a{
    display: block;
    padding:10px 30px;
    text-decoration: none;
    color: #333;
}

.gnavi li{
    margin-bottom:20px;
}

/*==================================================
　5-3-8 円が線に変化
===================================*/


.gnavi li a{
    /*円の基点とするためrelativeを指定*/
	position: relative;
}

.gnavi li.current a,
.gnavi li a:hover{
	color:#0481A2;
}

.gnavi li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 0;
    /*線になる丸の形状*/
    width: 100%;
    height: 5px;
    border-radius: 50%;
    background:#0481A2;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0.04, 1);/*X方向0.04、Y方向1*/
    transform-origin:center bottom;/*中央下部基点*/
}

/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
    height: 2px;/*縦幅を変化*/
    border-radius: 0;/*丸みをなくす*/    
    transform: scale(0.8, 1);/*X方向0.8、Y方向1にスケール拡大*/
}