CSS만 사용하여 요소 위로 마우스를 가져가면 콘텐츠를 표시하는 3가지 방법

방법 1 : HTML 문서에서 제목 속성과 함께 dfn 태그 사용

HTML

<dfn title="dev.to">Dev</dfn> is a community of software developers getting together to help one another out.

CSS

dfn[title] {
    position: relative;
}
dfn[title]::after {
    content: attr(title);
    position: absolute;
    display: block;
    background-color: #121b22;
    color: #c8cccf;
    font-size: 16px;
    bottom: 100%;
    white-space: nowrap;
    padding: 10px;
    border-radius: 6px;
    left: 30%;
    transform: scale(0);
    transition: ease-out 300ms;
}
dfn[title]:hover::after {
    transform: scale(1);
}

방법 2 : 의사 요소 ::before 또는 ::after 사용

HTML

<span id="devDescribe">Dev</span> is a community of software developers getting together to help one another out.

CSS

#devDescribe:hover::before {
    content: "dev.to";
    background-color: #ff746b;
    color: #fff;
    position: absolute;
    bottom: 10px;
    padding: 6px 12px;
    border-radius: 6px;
}

방법 3 : 요소에 data-* 속성 사용

HTML

<a  href="https://dev.to/"  data-explain="A community of software developers getting together to help one another out">Dev</a>

CSS

a[data-explain] {
    position: relative;
}
a[data-explain]::after {
    content: attr(data-explain);
    position: absolute;
    display: block;
    background-color: #121b22;
    color: #c8cccf;
    font-size: 16px;
    bottom: 100%;
    white-space: nowrap;
    padding: 10px;
    border-radius: 6px;
    left: 30%;
    transform: scale(0);
    transition: ease-out 300ms;
}
a[data-explain]:hover::after {
    transform: scale(1);
}