css中僞元素before或after中content的特殊用法attr

時間 2019-11-25

標籤 css 元素 content 特殊用法 attr 欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <span class="haorooms" name="開">開</span>
        <span class="haorooms" name="源">源</span>
        <span class="haorooms" name="中">中</span>
        <span class="haorooms" name="國">國</span>
    </div>
</body>
<style>
    .haorooms {
        position: relative;
        display: inline-block;
        font-size: 80px;
        color: black;
        overflow: hidden;
        white-space: pre;
    }
    
    .haorooms:before {
        display: block;
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        content: attr(name);
        overflow: hidden;
        color: #f00;
    }

</style>

</html>

相關標籤/搜索