FairyTalesss 2023-03-11 09:41 采纳率: 78.6%
浏览 21
已结题

html按钮伪元素宽高设置

为按钮元素添加before伪元素，想让伪元素宽高与按钮一致，设置100%后发现伪元素宽高与窗口相同，如何设置才能使其宽高与按钮一致？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .animated{
            padding: 5px 10px;
            border: 1px solid #f08c41;
            color: #f08c41;
            background-color: white;
        }

        .animated::before{
            content: "";
            background-color: #f08c41;
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 5;
        }
    </style>
</head>
<body>
    <button class="animated">Contact Us Now!</button>
</body>
</html>
  • 写回答

2条回答 默认 最新

  • MarkHan_ 2023-03-11 09:51
    关注

    该回答引用GPTᴼᴾᴱᴺᴬᴵ
    您可以尝试将按钮的 position 属性设置为 relative，然后将伪元素的 position 属性设置为 absolute，并使用 top 和 left 属性将伪元素定位在按钮的上方。然后设置伪元素的宽度和高度为 100%。最后，将伪元素的 z-index 属性设置为 -1，使其在按钮下方。

    以下是修改后的代码示例：

    <style>
    .animated{
        position: relative;
        padding: 5px 10px;
        border: 1px solid #f08c41;
        color: #f08c41;
        background-color: white;
    }

    .animated::before{
        content: "";
        background-color: #f08c41;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
</style>

    这样可以确保伪元素的宽高与按钮一致，并且伪元素可以在按钮下面。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 3月19日
  • 已采纳回答 3月11日
  • 创建了问题 3月11日

悬赏问题

  • ¥60 用visual studio编写程序，利用间接平差求解水准网
  • ¥15 Llama如何调用shell或者Python
  • ¥20 谁能帮我挨个解读这个php语言编的代码什么意思？
  • ¥15 win10权限管理，限制普通用户使用删除功能
  • ¥15 minnio内存占用过大，内存没被回收（Windows环境）
  • ¥65 抖音咸鱼付款链接转码支付宝
  • ¥15 ubuntu22.04上安装ursim-3.15.8.106339遇到的问题
  • ¥15 blast算法（相关搜索：数据库）
  • ¥15 请问有人会紧聚焦相关的matlab知识嘛？
  • ¥15 网络通信安全解决方案