html - 溢出:隐藏没有被伪元素填充 100%?
问题描述
这很难解释。我正在尝试做这样的事情: https ://codepen.io/pen/yLBaJOq
.button {
position: relative;
display: inline-block;
padding: 20px;
line-height: 10px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
border: 9px solid black;
border-radius: 55px;
transition: all 0.35s ease-in-out;
color: black;
cursor: pointer;
overflow: hidden;
z-index: 1;
background-color: transparent;
}
.button:before {
content: '';
display: block;
position: absolute;
background-color: red;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-30deg);
transform-origin: center;
width: calc(100% + 30px);
height: 0;
padding-top: 0%;
transition: all 0.35s ease-in-out;
z-index: -1;
}
.button:hover {
color: #fff;
border: 9px solid red;
}
.button:hover:before {
padding-top: 200%;
}
但是边框和元素之间有一条细线。像伪元素 :before 没有填写父元素 100%。我的意思的图像:
它发生在我正在尝试的所有浏览器(Chrome、FF、Safari、所有 Mac)中。所以我想知道我是否可以防止这种情况发生,同时仍然保持类似的悬停效果。
我当然可以只使用背景颜色的过渡,并以伪元素作为背景放弃这个想法。
解决方案
.button {
position: relative;
display: inline-block;
padding: 20px;
line-height: 10px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
border: 9px solid black;
border-radius: 55px;
transition: all 0.35s ease-in-out;
color: black;
cursor: pointer;
overflow: hidden;
z-index: 1;
background-color: transparent;
}
.button:before {
content: '';
display: block;
position: absolute;
background-color: red;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-30deg);
transform-origin: center;
width: calc(100% + 30px);
height: 0;
padding-top: 0%;
transition: all 0.35s ease-in-out;
z-index: -1;
}
.button:hover {
color: #fff;
border: 9px solid red;
background: red;
}
.button:hover:before {
padding-top: 200%;
}
<div class="button">WOAH</div>
推荐阅读
- sql - 无法识别左连接子查询的 where 子句
- c# - 更新期间 OleDb 并发冲突
- amazon-web-services - 通过 AWS API Gateway 后 JPG 损坏
- html - 当我分配 endDate=new Date() 时,引导日期时间选择器显示禁用一月月份
- azure - 使用 Serilog 到 Application Insights 的 Azure 函数日志记录
- python - 如何在 Python 中将 PDF 转换为 TIFF [CCITT Group 4 传真编码压缩]?
- javascript - 正则表达式检查第一个字符为 + 和其他只是数字
- sql - Oracle触发器-更新同一张表后更新记录
- google-chrome - Google Chrome:如何绕过 SSL 检查以用于开发目的
- python - 使用 cKDTree 查询找到最接近的三角形平面