如何解决锚点标记下划线未在具有突出显示动画的文本下对齐 编辑
我试图让我的锚标签执行动画处理,其中下划线将鼠标悬停在上面时突出显示上面的文本。不知道为什么下划线这么远位于左侧。关于可能导致此问题的原因有什么想法?
我尝试将容器类更改为position:absolute,然后将内容设置为相对,但这也不起作用。
.section-title {
display: block;
font-size: 2em;
text-align: center;
padding-bottom: 1.5%;
font-size: 2em;
transform: translateX(0%) translateY(-25%);
/* z-index: -1; */
}
.section-title-highlight {
color: black;
}
.section-title-highlight:before {
content: '';
display: block;
height: 20px;
width: 20%;
background: #35FCCE;
position: absolute;
bottom: 0;
left: 0;
transition: height .7s;
z-index: -1;
}
.section-title-highlight:hover:before {
height: 85%;
}
a {
text-decoration: none;
cursor: default;
display: block;
}
.container {
padding-top: 3%;
padding-left: 5%;
padding-right: 5%;
padding-bottom: 7%;
margin-top: 0;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 5%;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
background-color: rgb(236,236,236);
}
.container-item {
display: flex;
flex-direction: column;
}
#home {
height: 500px;
/* margin-bottom: 0; */
position: relative;
}
#projects {
height: 600px;
position: relative;
}
<div class="container">
<div id="projects">
<a href="#" class="section-title-highlight section-title">Projects</a>
<div class="container-item">
<p>
asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
</p>
</div>
</div>
解决方法
您正在突出显示块上使用position:absolute
,并将其放置在您指定的确切位置,相对于具有{em> position:relative
的父容器。
您的突出显示应该相对于section-title-highlight
中的文本,因此您只需要像这样相对设置即可:
.section-title-highlight {
position:relative;
}
您的突出显示元素现在位于文本的左下方:
.section-title-highlight:before {
height: 2px; /* or whatever your starting height should be */
width: 100%;
position: absolute;
bottom: 0;
left: 0;
/* rest of your css here... */
}
您遇到的另一个问题是突出显示的内容比文本要宽。这是因为标题是一个块元素,所以它会拉伸其容器的整个宽度。
您可以通过将高亮显示为inline
或inline-block
元素来解决此问题。在下面的示例中,我将您的section-title
设置为一个块元素,并将您的section-title-highlight
内联:
<div class="section-title">
<a class="section-title-highlight">Projects</a>
</div>
工作示例:
.section-title {
display: block;
text-align: center;
padding-bottom: 1.5%;
font-size: 2em;
transform: translateX(0%) translateY(-25%);
/* z-index: 0; */
}
.section-title-highlight {
position: relative;
color: black;
}
.section-title-highlight:before {
content: '';
display: block;
height: 2px; /* or whatever height you want to start */
width: 100%;
background: #35FCCE;
position: absolute;
bottom: 0;
left: 0;
transition: height .7s;
z-index: -1;
}
.section-title-highlight:hover:before {
height: 85%;
}
a {
text-decoration: none;
cursor: default;
display: block;
}
.container {
padding-top: 3%;
padding-left: 5%;
padding-right: 5%;
padding-bottom: 7%;
margin-top: 0;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 5%;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
background-color: rgb(236,236,236);
}
.container-item {
display: flex;
flex-direction: column;
}
#home {
height: 500px;
/* margin-bottom: 0; */
position: relative;
}
#projects {
height: 600px;
position: relative;
}
<div class="container">
<div id="projects">
<a href="#" class="section-title-highlight section-title">Projects</a>
<p>The heading above is using a block display (as in your code),so it is appearing the full width of the container.</p>
<div class="section-title">
<span class="section-title-highlight">Projects</span>
</div>
<div class="container-item">
<p>
This heading is using an inline element so the highlight is only the width of the text
</p>
</div>
</div>
</div>
,
我相信您只需更改以下内容即可得到结果:
.section-title-highlight:before {
width: 20%;
}
对此:
.section-title-highlight:before {
width: 100%;
}
关于“伪造文本宽度”的讨论可以归结为:div.projects
的宽度取决于文本的宽度。 a::before
的宽度由div.project
的宽度确定。如此,将a::before
的{{1}}属性设置为100%会将其设置为文本的宽度。
如您所料,也有必要绝对定位width
元素。如果不这样做,它将在流中,占据其容器的100%,然后将文本包装到下一行。如果您尝试从其中删除a::before
,这对您将很明显。
将容器类更改为绝对容器,将元素更改为相对容器,则只能将容器绝对定位在相对放置的DOM树中的下一个元素中(如果更有意义,则为“容器层次结构”)。所以不,那是行不通的。
这是代码:
position: absolute
.section-title {
display: inline-block;
font-size: 2em;
text-align: center;
padding-bottom: 1.5%;
font-size: 2em;
transform: translateX(0%) translateY(-25%);
/* z-index: -1; */
}
.section-title-highlight {
color: black;
}
.section-title-highlight:before {
content: '';
display: inline-block;
height: 20px;
width: 100%;
background: #35FCCE;
position: absolute;
bottom: 0;
left: 0;
transition: height .7s;
z-index: -1;
}
.section-title-highlight:hover:before {
height: 85%;
}
a {
text-decoration: none;
cursor: default;
}
.container {
padding: 3% 5% 7%;
margin: 0 5% 5%;
display: flex;
flex-direction: column;
align-items: center;
background-color: rgb(236,236);
}
.container-item {
display: flex;
flex-direction: column;
}
#projects {
height: 600px;
position: relative;
}
.projects-header {
text-align: center;
}
在 <div class="container">
<div id="projects">
<div class="projects-header">
<a href="#" class="section-title-highlight section-title">Projects</a>
</div>
<div class="container-item">
<p>
Edit: the problem was that the highlight on the title would expand to be as wide as this paragraph,which was not apparent when only "asdf" was in it..
</p>
</div>
</div>
</div>
上进行一些澄清可能会有所帮助。 position
的默认值为position
。静态定位的元素将放置在页面流中的任何位置,就像它们是文本段落一样。相对定位的元素相对于其静态位置进行定位,其中static
和top
偏离静态位置。因此,例如,假设您给left
赋予了div.projects
,那么它的位置将比没有指定任何top: -10px
值(即位置类型)的位置高10px是静态的。)
除非另有说明,否则绝对定位的元素位于position
和top: 0
相对定位的容器内。因此,您不必严格按照left: 0
风格使用top: 0
。您必须使用a::before
,否则栏将位于文本的顶部而不是底部。
编辑
OP和FluffyKitten在注释中描述的问题的修复程序(很好,我的修复程序)需要两个步骤。
- HTML的结构使得锚元素被视为flex单元。因此,其宽度与段落的宽度相关。因此,第一步是将锚标记包装在div中。 (作为
bottom: 0
。) - anchor标签处于块显示状态,这意味着它会占据其容器的整个宽度。解决此问题的方法是将
div.project-header
风格的display:block
更改为.section-title
。
您所要做的就是不要使用亲戚的头衔,您会没事的。
这将使用问题的原始代码,并更改框的宽度以缩小高度,并添加一个从下到下的过渡。
.section-title {
display: block;
font-size: 2em;
text-align: center;
padding-bottom: 1.5%;
font-size: 2em;
transform: translateX(0%) translateY(-25%);
/* z-index: -1; */
}
.section-title-highlight {
color: black;
}
.section-title-highlight:before {
content: '';
display: block;
height: 5px;
width: 100%;
background: #35FCCE;
position: absolute;
margin-bottom: .2em;
bottom: 0;
left: 0;
transition: margin-bottom .5s,height .7s;
z-index: -1;
}
.section-title-highlight:hover:before {
height: 85%;
margin-bottom:0;
}
a {
text-decoration: none;
cursor: default;
display: block;
}
.container {
padding-top: 3%;
padding-left: 5%;
padding-right: 5%;
padding-bottom: 7%;
margin-top: 0;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 5%;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
background-color: rgb(236,236);
}
.container-item {
display: flex;
flex-direction: column;
}
#home {
height: 500px;
/* margin-bottom: 0; */
position: relative;
}
#projects {
height: 2em;
position: relative;
}
<div class="container">
<div id="projects">
<a href="#" class="section-title-highlight section-title">Projects</a>
<div class="container-item">
</div>
</div>
<p>
asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
</p>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。