blocks|key|1539736|text|您需要将position:+relative添加到span元素中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1539737|​|1539738|.underline-effect+span{
++position:+relative;
}

.underline-effect+span:after{
	content:+'';
++position:+absolute;
++left:+0;
++display:+inline-block;
++height:+1em;
++width:+100%25;
++border-bottom:+2px+solid;
++margin-top:+10px;
++opacity:+0;
	-webkit-transition:+opacity+0.35s,+-webkit-transform+0.35s;
	transition:+opacity+0.35s,+transform+0.35s;
	-webkit-transform:+scale(0,1);
	transform:+scale(0,1);
}
.underline-effect+span:hover:after{
++++opacity:+1;
	-webkit-transform:+scale(1);
	transform:+scale(1);
}|code-block|syntax|javascript|1539739|<p+class="underline-effect">
++++++++++++++++++++++<span>Home</span>
+</p>|1539740|1539741|entityMap^0|4|I|P|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|Q|$]]

<p>You need to add <code>position: relative</code> to your <code>span</code> element.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.underline-effect span{
  position: relative;
}

.underline-effect span:after{
	content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 1em;
  width: 100%;
  border-bottom: 2px solid;
  margin-top: 10px;
  opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
}
.underline-effect span:hover:after{
    opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p class="underline-effect"&gt;
                      &lt;span&gt;Home&lt;/span&gt;
 &lt;/p&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1539757|text|您的span需要有一个span的伪元素可以关联的position:+relative;：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1539758|​|1539759|.underline-effect+span+{
++position:+relative;
}

.underline-effect+span:after+{
++content:+'';
++position:+absolute;
++top:+20px;
++left:+0;
++width:+100%25;
++border-bottom:+2px+solid;
++opacity:+0;
++-webkit-transition:+opacity+0.35s,+-webkit-transform+0.35s;
++transition:+opacity+0.35s,+transform+0.35s;
++-webkit-transform:+scale(0,+1);
++transform:+scale(0,+1);
}

.underline-effect+span:hover:after+{
++opacity:+1;
++-webkit-transform:+scale(1);
++transform:+scale(1);
}|code-block|syntax|javascript|1539760|<p+class="underline-effect">
++<span>Home</span>
</p>|1539761|1539762|entityMap^0|2|4|O|J|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|Q|$]]

<p>Your <code>span</code> needs to have a <code>position: relative;</code> that the span's pseudo-element can <em>relate</em> to:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.underline-effect span {
  position: relative;
}

.underline-effect span:after {
  content: '';
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  border-bottom: 2px solid;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
}

.underline-effect span:hover:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p class="underline-effect"&gt;
  &lt;span&gt;Home&lt;/span&gt;
&lt;/p&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1539794|text|代码是按照你说的做的。将父元素的宽度设置为100%25，这就是动画悬停影响占100%25的原因。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1539795|++++.underline-effect+span:after{
++++content:+'';
++position:+absolute;
++left:+0;
++display:+inline-block;
++height:+1em;
++width:+60px;/*changed+from+100%25*/
++border-bottom:+2px+solid;
++margin-top:+10px;
++opacity:+0;
++++-webkit-transition:+opacity+0.35s,+-webkit-transform+0.35s;
++++transition:+opacity+0.35s,+transform+0.35s;
++++-webkit-transform:+scale(0,1);
++++transform:+scale(0,1);
}
.underline-effect+span:hover:after{
++++opacity:+1;
++++-webkit-transform:+scale(1);
++++transform:+scale(1);
}|code-block|syntax|javascript|1539796|参见此小提琴|offset|length|1539797|编辑:这是可行的，但上面的答案是，将position:relative放在span上是一个更好的解决方案|style|CODE|1539798|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/sc1bmwkm/1/^0|0|0|3|3|0|0|I|H|11|4|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@$I|13|J|14|M|N]|$I|15|J|16|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>The code is doing what you told it to do. you set the width of the parent element to 100% and that is why your animation hover affect is taking up 100%. </p>

<pre><code>    .underline-effect span:after{
    content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 1em;
  width: 60px;/*changed from 100%*/
  border-bottom: 2px solid;
  margin-top: 10px;
  opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
}
.underline-effect span:hover:after{
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}
</code></pre>

<p>see this <a href="https://jsfiddle.net/sc1bmwkm/1/" rel="nofollow noreferrer">fiddle</a></p>

<p>EDIT: This will work but the above answer that putting <code>position:relative</code> on your <code>span</code> is a better solution imho</p>


blocks|key|428145|text|span需要一个相对的位置，但另一种方式，你可以给边框底部的跨度，填充或线的高度，当你悬停跨度，边框底部显示。我觉得这样更好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|428146|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Span needs a relative position, but another way, you can give border-bottom to span, and padding or line-height that, and when you hover span, border-bottom is shown. I think this way is better.</p>


<p>I'm actually trying to add an underline effect on the text when it is hovered </p>

<p>But when I hover on the p element the underline is taking actually the entire space, what I want is the underline should be displayed only within the text not the complete space which is occupied by the text</p>

<p>To do that I actually added a span element and gave the hover effect to the span, but still it is working the same, </p>

<p>Please check the effect I have added the code below, please help, Thanks in advance :)</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.underline-effect span:after{
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 1em;
  width: 100%;
  border-bottom: 2px solid;
  margin-top: 10px;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(0,1);
  transform: scale(0,1);
}
.underline-effect span:hover:after{
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p class="underline-effect"&gt;
  &lt;span&gt;Home&lt;/span&gt;
&lt;/p&gt;</code></pre>
</div>
</div>
</p>


Underline hover effect is taking the entire space, but it should take only the text space

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我实际上是想在文本上加上下划线效果但是当我悬停在p元素上时，下划线实际上占据了整个空间，我想要的是下划线应该只显示在文本中，而不是文本占用的完整空间内。为了做到这一点，我实际上添加了一个span元素，并给了span的悬停效果，但是它仍然是一样工作的，请检查我在下面添加的代码的效果，请帮助，谢谢:)​.underline...

问下划线悬停效应占用整个空间，但应该只占用文本空间。
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问下划线悬停效应占用整个空间，但应该只占用文本空间。EN