[英]Centering the Pseudo-Element
So I am trying to center this triangle to the center of the a
element using CSS, here is the CodePen: http://codepen.io/DerekDev/pen/yyjqvd 因此,我尝试使用CSS将这个三角形居中到a
元素的中心,这是CodePen: http ://codepen.io/DerekDev/pen/yyjqvd
As you can see, when you hover over a menu item, the triangle is not center, but is off to the right side. 如您所见,将鼠标悬停在菜单项上时,三角形不是居中,而是在右侧。
.menu a {
color:#ffffff;
text-decoration:none;
font-family:'Roboto', sans-serif;
font-size:24px;
padding-left:20px;
padding-right:20px;
padding-top:23px;
padding-bottom:23px;
transition:.5s;
}
.menu a:hover:after {
opacity:1.0;
}
.menu a:after {
transition:.5s;
opacity:0.0;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 15px solid #217aa4;
position:absolute;
content:"";
top:75px;
}
.menu a:hover {
background-color:#217aa4;
}
Any help is appreciated. 任何帮助表示赞赏。
The pseudo-element
use absolute
position, in this case you need to make relative the a
parent: pseudo-element
使用absolute
位置,在这种情况下,您需要使相对对象a
父对象:
.menu a {
position:relative;
}
Then use a combination of left
and translate
to get the perfect center: 然后结合使用left
和translate
以获得完美的中心:
.menu a:after {
position:absolute;
content:"";
top:100%;
left:50%;
transform:translateX(-50%)
}
Add this to your .menu a:after
: 将此添加到您的.menu a:after
:
left: calc(50% - 37.5px);
And this to the .menu a
: 这是.menu a
:
position: relative;
Here's a Fiddle: http://jsfiddle.net/c9br43sv/ 这是一个小提琴: http : //jsfiddle.net/c9br43sv/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.