タイトルなど文字の両端に中央線を入れる CSS

サイトマップ

ホームページとデザインの会社
株式会社ジェイプラン

menu
 
  タイトルなど文字の両端に中央線を入れる CSS

タイトルなど文字の両端に中央線を入れる CSS

その1:

前と後ろに横線を並べる。

文字間を詰めて線に見せる

 

http

<h2 class=”index2″>タイトル</h2>

 

CSS

index2:after{
content: “ —- “;
letter-spacing: -2px

}
.index2:before{
content: “—- ”;
letter-spacing: -2px
}

 

 

 

その2

<span></span>で囲み、背景の色で線を隠す

タイトル左 線は右

HTML

 

CSS

.index1{
position: relative;
}
.index1:before {
content: “”;
display: block;
border-top: solid 1px #e2e5e4;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
z-index: 1;
}
.index1 span{
background: #fff;
padding: 0.4em 1.5em;
position: relative;
z-index: 5;
border: 1px solid #83d8d1;
font-size: 1.2em
}

タイトル真ん中、左右に線の場合は以下追加

.index1 {
text-align: center;
}

 

参考ページ:http://coliss.com/articles/build-websites/operation/css/css-centered-heading-horizontal-line-by-impressivewebs.html

 

 

印刷はこんなに安かったの?

梅オーナー情報はこちら

おすすめレンタルサーバー

独自SLLが無料!月額100円~使える!使いやすく初心者にお勧め!


ホームページお役立ち情報

東京・千葉の中国語教室

中国語教室