cssのattr関数を使ってオンマウス時に要素の周辺に文字列を表示する

attr関数

選択された要素の属性の値を受け取ってスタイルシートの中で使うことができるようになる。 javascriptなしで文字列の切り替えなどができるようにできる。

使用例

content: attr(teamname);の箇所で「input[type=radio]:nth-child(1)に概要する要素にhoverした時、afterにteamname属性の値を表示する」ようにする。

css 側

input[type=radio]:nth-child(1):hover::after{
  content: attr(teamname);
  font-size: 10px;
  left: -13px;
  top: -5px;
  color: #006e54;
  position: relative;
  z-index: -100;
  overflow: hidden;
  white-space: nowrap;
}

html側

<input type="radio" class="chb" name="1-9" value="F" teamname="チームF" >

表示結果

input要素にマウスホバー時の表示

teamname属性の値がjavascript等で書き換えられた場合も対応できる。