CSS 使用 :before 和 :after 创建的元素不显示
CSS element created with :before and :after doesn't show
我尝试像这样显示 html 元素:
here
这是一个底部有箭头的正方形,我使用这种样式创建它:
.square {
min-width: 60px;
height: 60px;
margin-left: 5px;
display: flex;
justify-content: center;
align-items: center;
background-color: #1db911;
border-radius: 15px;
font-size: 14px;
color: #ffffff;
}
.square:after,
.square:before {
bottom: 30%;
left: 31%;
border: solid transparent;
content: ' ';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
display: block;
}
.square:after {
border-color: rgba(238, 238, 238, 0);
border-top-color: #1db911;
border-width: 10px;
margin-left: -10px;
display: block;
}
.square:before {
border-color: rgba(204, 204, 204, 0);
border-top-color: #1db911;
border-width: 10px;
margin-left: -10px;
display: block;
}
但是有一个问题。当我水平滚动时,三角形停留在:
here
这是我的父元素:
here
可以水平滚动。
我也尝试将 position: relative
用于 square
class,但它有问题。它没有在正方形上显示三角形。
像这样:
here(为了显示更好,我把三角形涂成了黑色)
这是我这个州的风格
.square {
min-width: 60px;
height: 60px;
margin-left: 5px;
display: flex;
justify-content: center;
align-items: center;
background-color: #1db911;
border-radius: 15px;
font-size: 14px;
color: #ffffff;
position: relative;
}
.square:after,
.square:before {
bottom: -22%;
left: 50%;
border: solid transparent;
content: ' ';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
display: block;
}
.square:after {
border-color: rgba(238, 238, 238, 0);
border-top-color: black;
border-width: 10px;
margin-left: -10px;
display: block;
}
.square:before {
border-color: rgba(204, 204, 204, 0);
border-top-color: #1db911;
border-width: 10px;
margin-left: -10px;
display: block;
}
<div class="square">
<span>sample</span>
</div>
谢谢!
您可以使用 top:100%
而不是底部,如果您希望正方形仅与内容一样宽,您可以使用 inline-flex
:
.square {
min-width: 60px;
height: 60px;
margin-left: 5px;
display: inline-flex;
justify-content: center;
align-items: center;
background-color: #1db911;
border-radius: 15px;
font-size: 14px;
color: #ffffff;
position: relative;
}
.square:after,
.square:before {
top: 100%;
left: 50%;
border: solid transparent;
content: ' ';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
display: block;
}
.square:after {
border-color: rgba(238, 238, 238, 0);
border-top-color: #1DB911;
border-width: 10px;
margin-left: -10px;
display: block;
}
.square-container:before {
border-color: rgba(204, 204, 204, 0);
border-top-color: #1db911;
border-width: 10px;
margin-left: -10px;
display: block;
}
<div class="square">
<span>sample</span>
</div>
我尝试像这样显示 html 元素: here
这是一个底部有箭头的正方形,我使用这种样式创建它:
.square {
min-width: 60px;
height: 60px;
margin-left: 5px;
display: flex;
justify-content: center;
align-items: center;
background-color: #1db911;
border-radius: 15px;
font-size: 14px;
color: #ffffff;
}
.square:after,
.square:before {
bottom: 30%;
left: 31%;
border: solid transparent;
content: ' ';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
display: block;
}
.square:after {
border-color: rgba(238, 238, 238, 0);
border-top-color: #1db911;
border-width: 10px;
margin-left: -10px;
display: block;
}
.square:before {
border-color: rgba(204, 204, 204, 0);
border-top-color: #1db911;
border-width: 10px;
margin-left: -10px;
display: block;
}
但是有一个问题。当我水平滚动时,三角形停留在:
here
这是我的父元素:
here
可以水平滚动。
我也尝试将 position: relative
用于 square
class,但它有问题。它没有在正方形上显示三角形。
像这样:
here(为了显示更好,我把三角形涂成了黑色)
这是我这个州的风格
.square {
min-width: 60px;
height: 60px;
margin-left: 5px;
display: flex;
justify-content: center;
align-items: center;
background-color: #1db911;
border-radius: 15px;
font-size: 14px;
color: #ffffff;
position: relative;
}
.square:after,
.square:before {
bottom: -22%;
left: 50%;
border: solid transparent;
content: ' ';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
display: block;
}
.square:after {
border-color: rgba(238, 238, 238, 0);
border-top-color: black;
border-width: 10px;
margin-left: -10px;
display: block;
}
.square:before {
border-color: rgba(204, 204, 204, 0);
border-top-color: #1db911;
border-width: 10px;
margin-left: -10px;
display: block;
}
<div class="square">
<span>sample</span>
</div>
谢谢!
您可以使用 top:100%
而不是底部,如果您希望正方形仅与内容一样宽,您可以使用 inline-flex
:
.square {
min-width: 60px;
height: 60px;
margin-left: 5px;
display: inline-flex;
justify-content: center;
align-items: center;
background-color: #1db911;
border-radius: 15px;
font-size: 14px;
color: #ffffff;
position: relative;
}
.square:after,
.square:before {
top: 100%;
left: 50%;
border: solid transparent;
content: ' ';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
display: block;
}
.square:after {
border-color: rgba(238, 238, 238, 0);
border-top-color: #1DB911;
border-width: 10px;
margin-left: -10px;
display: block;
}
.square-container:before {
border-color: rgba(204, 204, 204, 0);
border-top-color: #1db911;
border-width: 10px;
margin-left: -10px;
display: block;
}
<div class="square">
<span>sample</span>
</div>