CSSのattr関数でHTMLの属性値を取得・表示する【ツールチップなど】

HTML

<h2 data-en="first">見出しタイトル</h2>
<h2 data-en="second">見出しタイトル</h2>

CSS

h2::before{
    content:attr(data-en);
    /*以下、英語装飾のデザインを任意に設定*/
}

HTML

<p>詳しくは<a href="###" data-tt="別のページを開きます">こちら</a>をご覧ください。</p>
<p>詳しくは<a href="###" data-tt="外部サイトを開きます">こちら</a>をご覧ください。</p>

CSS

a[data-tt]{
    font-weight:bold;
    position: relative;
}
a[data-tt]:hover::before{/*テキスト*/
    content:attr(data-tt);
    display: block;
    width:150px;
    background-color: #e9e9e9;
    color:#111;
    font-size:12px;
    padding:.25em .5em;
    border-radius:2px;
    position: absolute;
    top:calc(-100% - .5em);
    left:0;
}
a[data-tt]:hover::after{/*矢印*/
    content: "";
    width: 10px;
    height: 10px;
    background: #e9e9e9;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    position: absolute;
    top: -10px;
    left: 10px;
}

HTML

<p>詳しくは<a href="###" data-tt="別のページ">こちら</a>をご覧ください。</p>
<p>詳しくは<a href="###" data-tt="外部サイト">こちら</a>をご覧ください。</p>

CSS

a[data-tt]:hover::before{
    content:attr(data-tt) "を開きます";
    /*以下省略*/
}

HTML

<ul>
    <li><a href="https://hogehoge.com/news/20XX/01/helloworld.html">ブログ記事A</a></li>
    <li><a href="https://hogehoge.com/news/20XX/03/hogehoge.html">ブログ記事B</a></li>
</ul>

CSS

a:after{
    content:"（" attr(href) "）";
}

HTML

<table class="myTbl">
    <thead>
        <tr>
            <th>会社名</th>
            <th>都道府県</th>
            <th>電話番号</th>
            <th>メールアドレス</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th data-label="会社名">(株)サンプル</th>
            <td data-label="都道府県">東京都</td>
            <td data-label="電話番号">03-1234-5678</td>
            <td data-label="メールアドレス">info@example.com</td>
        </tr>
        <tr>
            <th data-label="会社名">(株)hogehoge</th>
            <td data-label="都道府県">埼玉県</td>
            <td data-label="電話番号">04-2345-6789</td>
            <td data-label="メールアドレス">info@hogehoge.com</td>
        </tr>
    </tbody>
</table>

CSS

.myTbl{
    border:none;
    border-collapse: collapse;
    margin:1em auto;
    padding:.5em;
    background-color:#f9f9f9;
}
.myTbl th,.myTbl td{
    border:solid 1px #333;
    padding:.5em 1.5em;
    font-size:14px;
    text-align: center;
    font-weight: 400;
}
.myTbl th{
    background-color: #a0a0a0;
}
@media only screen and (max-width:600px){
    .myTbl,.myTbl thead,.myTbl tbody,.myTbl,.myTbl tr,.myTbl,.myTbl th,.myTbl,.myTbl td{
        display: block;
        width:100%;
    }
    .myTbl thead{
        display: none;
    }
    .myTbl tr{
        margin-bottom: .5em;
    }
    .myTbl th,.myTbl td{
        text-align: left;
        padding:0;
    }
    .myTbl th:before,.myTbl td:before{
        content:attr(data-label);
        display: inline-block;
        width:25%;
        color:#333;
        font-size:12px;
        font-weight: bold;
        text-align: left;
        padding: 1em;
        border-right: solid 1px #666;
        margin-right:1em;
    } 
}