はじめに

CSSを学びたいStep11です。今回は属性値を取得できるattrに関して学んでいきます！

成果物

ソースコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS attr Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="tooltip" data-tooltip="これはツールチップのテキストです。">ホバーしてください</div>
</body>
</html>

styles.css

.tooltip {
    margin: 32px;
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip::after {
    margin-left: 32px;
    content: attr(data-tooltip); /* data-tooltip属性の値を表示 */
    position: absolute; /* 絶対位置指定 */
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0; /* 透明度を0に設定 */
    visibility: hidden;
    transition: opacity 0.3s;
}

.tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

こんな便利に使えるといいですね！！