移动底部边框以显示内联文本

Question

我正在尝试移动底部边框，以便在您悬停时更接近文本。

https://jsfiddle.net/s8ctga2o/

我尝试过使用伪，但它们并没有按预期工作。只有每一个项目都有一个底部边框和第一段文字，只有最后一行，而不是全部。

.project-link span a {
color: red;
text-decoration: none;
position: relative;
display: inline;
vertical-align: top;
}

.project-link span a:hover:after {
content:'';
position:absolute;
left:0;
right:0;
bottom:1px;
border-bottom:solid 1px red;
}

Answer 1

你的问题很不清楚。我把它当作： 您希望始终在文本上加下划线，当您悬停时，下划线应向上移动。

我在下面这样做了：

＆＃13;

＆＃13;

.project-link {
    line-height:30px;
    padding-bottom:5px;
    margin-bottom:0px;
    border-bottom: solid 1px #000000;
    text-decoration:none;
}
.project-link:hover {
    padding-bottom:0px;
    margin-bottom:5px;
    border-bottom: solid 1px #000000;
}

＆＃13;

<div class="project_wrap">
    <div class="project_miniwrap"> <a class="project-link" href="#" id="toggle">Graduated with a background in Biological Sciences and pursuing a Masters of Industrial Design at Pratt Institute in Brooklyn, NY. I strongly believe in thoughtful design. Here are a couple of my projects over the years. </a>
 <a class="project-link" href="#modal1" id="one" >Modurra Shelving </a>  <a class="project-link" href="#modal2" id="two" >Kami Bicycle Helmet </a>  <a class="project-link" href="#modal3" id="three" >Revamping Language Learning </a> 	<a class="project-link" href="#modal4" id="four">Sports Innovation Challenge </a>  <a class="project-link" href="#modal5" id="five" >Lights Out </a>  <a class="project-link" href="#modal6" id="six" >Maru Personal Speaker Design </a> 	<a class="project-link" href="#modal7" id="seven">A Few Casual Projects </a> 
    </div>

＆＃13;

＆＃13;

＆＃13;

我已经删除了所有其他样式，只留下了悬停。

重要的部分是在边缘底部和填充底部之间切换。填充将移动边界但边缘不会。因此，您可以将它们交换以使边框向上移动。

如果您希望在将鼠标悬停在下方时阻止出现，请将您的链接包装在div中并提供div class="project-link"。给div padding-bottom:Xpx。更改css以修改子元素：

＆＃13;

＆＃13;

.project-link > a{
    line-height:30px;
    padding-bottom:5px;
    margin-bottom:0px;
    border-bottom: solid 1px #000000;
    text-decoration:none;
}
.project-link:hover  > a{
    padding-bottom:0px;
    margin-bottom:5px;
    border-bottom: solid 1px #000000;
}
.project-link{
    display:inline;
    padding-bottom:6px;
}

＆＃13;

<div class="project_wrap">
    <div class="project_miniwrap">  
        <div class="project-link">
            <a  href="#" id="toggle">Graduated with a background in Biological Sciences and pursuing a Masters of Industrial Design at Pratt Institute in Brooklyn, NY. I strongly believe in thoughtful design. Here are a couple of my projects over the years. </a>
        </div>
        <div class="project-link"><a class="project-link" href="#modal1" id="one" >Link a </a> </div>
        <div class="project-link"> <a class="project-link" href="#modal2" id="two" >Link B </a> </div> 
        <div class="project-link"> <a class="project-link" href="#modal2" id="two" >Link C </a> </div> 
        <div class="project-link"> <a class="project-link" href="#modal2" id="two" >Link D </a> </div> 
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;