집 > 기사 > 웹 프론트엔드 > CSS로 html 태그의 제목 스타일을 수정하는 방법은 무엇입니까? (코드 예)

CSS로 html 태그의 제목 스타일을 수정하는 방법은 무엇입니까? (코드 예)

青灯夜游앞으로: 2021-02-19 10:00:157413검색

툴팁 구현을 위한 순수 CSS, CSS는 html 태그의 제목 스타일을 변경합니다. [저자는 시간이 나면 일부 경계 조건을 업데이트할 예정입니다. 현재 스타일은 극단적인 경우 문제가 됩니다. 코드를 직접 온라인 환경에 복사하지 마세요. 이것은 작성자가 작성한 작은 데모일 뿐입니다.]

html 코드:

다음 코드는 직접 사용할 수 있습니다. 투팁 스타일은 디버그로 사용자 정의할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        span {
            position: relative;
            margin: 50px auto;
            border: 1px solid;
        }
        span[aria-label]:hover:after {
            content: attr(aria-label);
            position: absolute;
            bottom: -30px;
            left: 0;
            border: 1px solid;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="box">
        <span aria-label="我是tooltip">我是主体内容啊</span>
    </div>
</body>
</html>

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 교육을 방문하세요! !

위 내용은 CSS로 html 태그의 제목 스타일을 수정하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css html copy

성명：

이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：CSS ID 선택기를 작성하는 방법다음 기사：CSS ID 선택기를 작성하는 방법