ミギムキ

[CSS] 電話番号&受付時間の表示をサッと設置したい(ついでにタッチで電話アプリ立ち上げ)

サンプルコード

html

<address class="tel_num"> <a href="tel:0000000000">0000-00-0000</a> <p>受付時間 00:00~00:00(平日)</p> </address>
スポンサー広告

CSS

.tel_num { display: table; padding: 0px 0px 0px 2em; text-align: center; } .tel_num > a { position: relative; font-size: 24px; font-weight: bold; letter-spacing: 2px; line-height: 1; } .tel_num > a:before { position: absolute; top: 50%; left: -1em; transform: translateY(-50%); font-family: FontAwesome; content: "\f095"; } .tel_num > a:link, .tel_num > a:visited, .tel_num > a:active, .tel_num > a:hover { color: #000; text-decoration: none; } .tel_num > p { color: #000; font-size: 12px; line-height: 1; }

仕組み、解説、補足など

スポンサー広告