Перемещение нижней границы для встроенного текста

Question

Я пытаюсь переместить нижний край, чтобы он был ближе к тексту при наведении курсора.

https://jsfiddle.net/s8ctga2o/

Я попытался с помощью pseudos, но они не работают должным образом. Только каждый второй элемент получает нижнюю границу и первый абзац текста, только последняя строка делает, а не все.

.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

Ваш вопрос непонятен. Я принял это как: Вы хотите подчеркнуть текст во все времена, и когда вы наводите курсор, подчеркивание должно двигаться вверх.

Я сделал это ниже:

.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; 
 
}

<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> \t <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> \t <a class="project-link" href="#modal7" id="seven">A Few Casual Projects </a> 
 
    </div>

Я вырезал все другие стили и оставили только зависать.

Важная часть - это переход между краем и дном. Прокладка будет перемещать границу, но маржа не будет. Таким образом, вы можете поменять их, чтобы заставить границу двигаться вверх.

Если вы хотите предотвратить размывание при наведении ниже, оберните свои ссылки в div и дайте div class="project-link". Дайте div padding-bottom:Xpx. Изменение CSS, чтобы изменить дочерние элементы:

.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; 
 
}

<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>