html – 中心psuedo元素内容

概述我有一个小“插入”放在我目前悬停的菜单项上,我现在意识到插入符不是居中的.我有一堆动态大小的菜单项. 类菜单 – 插入符号在被一点点jquery盘旋时被应用,我有一些像这样的css： .menu-caret::before {content:"";position: absolute;margin-left: 20px;bottom: 0;width: 0%;height: 0;bo 我有一个小“插入”放在我目前悬停的菜单项上,我现在意识到插入符不是居中的.我有一堆动态大小的菜单项.

类菜单 – 插入符号在被一点点jquery盘旋时被应用,我有一些像这样的CSS：

.menu-caret::before {content:"";position: absolute;margin-left: 20px;bottom: 0;wIDth: 0%;height: 0;border-left: 5px solID transparent;border-right: 5px solID transparent;border-bottom: 5px solID black;}

请参阅此处的快速示例 – https://jsfiddle.net/keL4zhky/3/.

是否有可能将插入物放在底部？谢谢！

编辑：没有亲戚可以做到这一点吗？我有一个全宽度子菜单,如果我将ul / li更改为relative将失去它的效果 – 请参见此处的示例http://codepen.io/ajmajma/pen/KgGxWL

解决方法 只做父母的位置：亲属;并添加左：50％;和margin-left：-5px;到伪元素：

ul {  wIDth: 100%;  position: relative;  display: inline-block;  List-style-type: none;}li {  padding: 20px;  float: left;  position: relative;}.menu-caret::before {  content: "";  position: absolute;  left: 50%;  bottom: 0;  wIDth: 0%;  margin-left: -5px;  height: 0;  border-left: 5px solID transparent;  border-right: 5px solID transparent;  border-bottom: 5px solID black;}

<ul>  <li >one</li>  <li >larger</li>  <li >larrrrger</li></ul>

而不是左：50％;和margin-left：-5px;你也可以使用left：calc(50％ – 5px);

总结

以上是内存溢出为你收集整理的html – 中心psuedo元素内容全部内容，希望文章能够帮你解决html – 中心psuedo元素内容所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。