У меня есть ссылка, которая стилизованная сcss- длина границы нижней
a:hover {
border-bottom: 3px solid #fff;
}
и выглядит следующим образом:
Но мне нужно, чтобы изменить длину границы, как это:
Любой идеи о том, как я могу это сделать? Спасибо
Если вы можете использовать псевдоэлемент ::after, вы можете дать стили этому.
body {
background-color:#800;
}
#contact {
color:white;
position:relative;
text-decoration:none;
}
#contact:hover::after {
position:absolute;
display:block; content:'';
left:25%; right:25%; bottom:0;
border-bottom:3px solid;
}<a id="contact" href="#">Contact Us</a>Или, если вы не можете использование ::after, может быть что-то вроде этого.
body {
background-color:#800
}
#contact {
color:white;
text-decoration:none;
display:inline-block;
position:relative; left:1em;
width:3em; overflow:visible;
text-indent: -1em;
white-space:nowrap;
}
#contact:hover {
border-bottom:3px solid;
}<a id="contact" href="#">Contact Us</a>(Это один более привередлив, хотя, положение подчеркиванием зависит от размера шрифта, и вы, возможно, придется возиться немного, чтобы получить его в правильном положении.)
лучше использовать текст-украшение в вашей ситуации Как это
.underLineText:hover{
text-decoration:underline
}
И Н TML нравится
<p>Co<span class="underLineText">ntact</span> Us</p>
Но тогда я бы не смог создать его толщиной 3 пикселя. :( – Suika
Вы уверены, что это хорошая идея вставить новую разметку только для того, чтобы создать декоративный вид? Это можно сделать все в CSS, для чего это за CSS. –
@Suika, то вы можете использовать 'border-bottom 'вместо' text-decoration' –
Это, как я хотел бы сделать это:
a:hover:after {
content: ' ';
text-decoration: none;
position: absolute;
width: 50%;
height: 100%;
left: 0;
margin-left: 25%;
border-bottom: solid 3px black;
}
Там может быть более чем один путь. Я думаю;
<div class="linkDiv">
<a>Link</a>
<div class="border"></div>
</div>
<style type="text/css">.border:hover{width:50%;border-bottom:3px solid #fff}</style>
Для этого используйте псевдо элементы как ':: after' для ваших ссылок и определите': hover', ': focus' и': active' для этого. – vivekkupadhyay