个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
尝试在之前的帮助下在导航 anchor 的底部显示线，在我尝试了很多来解决我的问题之后但没有解决这个问题。我想在 pasudo 类之后使用 css transform 和 transition 添加底线
<html>
<head>
<style>
body,ul,li,a,nav{
margin: 0;
padding: 0;
}
nav {
background-color: #dadada;
}
.menu-items {
list-style: none;
text-align: center;
}
.menu-items a {
float: left;
text-decoration: none;
padding:10px 10px;
color: #fff;
}
.header-menu li > a::after {
border-color: red;
border-style: solid;
position: absolute;
top: 20%;
left: 0;
width: 50%;
height: 0px;
/*background: rgba(0,0,0,0.1);*/
content: '';
opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
transform: translateY(20px);
}
.header-menu li > a:hover::after {
opacity: 1;
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
transform: translateY(1px);
}
.menu-items li {
display: inline-block;
}
</style>
</head>
<body>
<nav class="header-menu">
<ul class="menu-items">
<li><a href="#">Home</a></li>
<li><a href="#">Animal</a></li>
<li><a href="#">Birds</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Address</a></li>
<li><a href="#">News</a></li>
</ul>
</nav>
</body>
</html>
最佳答案
添加position: relative .header-menu li > a 或 .menu-items a
relative This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table--group, table-row, table-column, table-cell, and table-caption elements is undefined.
然后将 .header-menu li > a::after 中的 top: 50%; 更改为 top: 100%;
现场演示
body,
ul,
li,
a,
nav {
margin: 0;
padding: 0;
}
nav {
background-color: #dadada;
}
.menu-items {
list-style: none;
text-align: center;
}
.menu-items a {
float: left;
text-decoration: none;
padding: 10px 10px;
color: #fff;
position: relative/*this will wrap pseudo elements*/
}
.header-menu li > a::after {
border-color: red;
border-style: solid;
position: absolute;
top: 100%; /*because we want it to be at the bottom of the anchor*/
left: 10px; /*10px because anchor has a padding of 10px*/
width: 50%;
height: 0px;
/*background: rgba(0,0,0,0.1);*/
content: '';
opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
transform: translateY(20px);
}
.header-menu li > a:hover::after {
opacity: 1;
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
transform: translateY(1px);
}
.menu-items li {
display: inline-block;
}<nav class="header-menu">
<ul class="menu-items">
<li><a href="#">Home</a>
</li>
<li><a href="#">Animal</a>
</li>
<li><a href="#">Birds</a>
</li>
<li><a href="#">Sports</a>
</li>
<li><a href="#">Address</a>
</li>
<li><a href="#">News</a>
</li>
</ul>
</nav>关于html - 在 css 中使用伪类后将底线添加到 anchor ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37255358/
24
4
0
一直在使用Vim多年来，一直以来我都接受了bright and distracting the visual bell曾是。最近有人给我看Emacs visual bell ，它只闪烁屏幕的顶行和底行
如何删除 UITableViewController 中的 UISearchBar 底线？ 也可以应用 Swift 解决方案。 这是我的 VC 代码: NavigationController.Nav
我有一个 Activity ，我在其中将数据 bundle 到另一个 Activity 。有了这些数据，我还 bundle 了一个自定义颜色，我希望在 Activity 2 中显示 EditText
我有一个应用有时需要其导航栏才能与内容融为一体。 有谁知道如何摆脱这个烦人的小酒吧或改变它的颜色？ 在下图的情况下，我说的是“ Root View Controller ”下方的 1px 高度线 最佳
如何删除DataRepeater控件中数据控件项的底部边框线: 最佳答案 您在 DataRepeater 中看到的分隔符项目之间的控制，是非客户区的绘图DataRepeaterItem控制。 你可以找
.segment-button-indicator { -ms-flex-item-align: end; align-self: flex-end;
我是一名优秀的程序员,十分优秀！