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日

悬赏问题

  • ¥15 有了解d3和topogram.js库的吗？有偿请教
  • ¥100 任意维数的K均值聚类
  • ¥15 stamps做sbas-insar，时序沉降图怎么画
  • ¥15 unity第一人称射击小游戏，有demo，在原脚本的基础上进行修改以达到要求
  • ¥15 买了个传感器，根据商家发的代码和步骤使用但是代码报错了不会改，有没有人可以看看
  • ¥15 关于#Java#的问题，如何解决？
  • ¥15 加热介质是液体，换热器壳侧导热系数和总的导热系数怎么算
  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
  • ¥15 cmd cl 0x000007b
  • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line