Question 174357 in CSS Question posted in
Some basic documentation can be found here.

css hover border without letter-spacing

CSS:

.item {
font-size: 10px;
font-weight: 500;
line-height: 25px;
letter-spacing: 0.65em;
padding-left: -0.65em;
text-align: center;
text-transform: uppercase;
margin: 0 50px -1px 0;
font-style: normal;
border-bottom: 1px solid #D7D3CE;
}

.item:hover {
 border-bottom: 1px solid #000000;
}

is there any solution to cut the border on hover only till the end of the last letter (without the letter-spacing)?

enter image description here

thanks for any tipps.

Tags:

2

Answers


  1. 0

    Something like this?

    .row {
  border-bottom: 1px solid #D7D3CE;
}

.item {
  position: relative;
  font-size: 10px;
  font-weight: 500;
  /*line-height: 25px;*/
  letter-spacing: 0.65em;
  padding-left: -0.65em;
  text-align: center;
  text-transform: uppercase;
  margin: 0 50px -1px 0;
  font-style: normal;
}

.item:after {
  content: " ";
  position: absolute;
  bottom: -4px;
  left: 0px;
  height: 1px;
  width: calc(100% - 0.65em);
}

.item:hover:after {
  background-color: #000000;
}
    <div class="row">
  <span class="item">Focus</span>
</div>
<div class="row">
  <span class="item">Foo</span>
</div>
<div class="row">
  <span class="item">Bar</span>
</div>
<div class="row">
  <span class="item">Lorem ipsun</span>
</div>
<div class="row">
  <span class="item">The quick brown fox</span>
</div>
    Login or Signup to reply.
  2. 0

    Since you are not looking for a transition, you can rely on gradient to create the border. Reduce its width by the amount of letter-spacing and it should be good

    .item {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.65em;
  text-transform: uppercase;
  margin: 0 50px -1px 0;
  font-style: normal;
  display: inline-block;
  background: 
   linear-gradient(var(--c,#D7D3CE) 0 0) no-repeat
   0 100%/calc(100% - .65em) 1px; /* width = (100% - .65em)  height = 1px*/
}

.item:hover {
  --c: #000000; /* update the color on hover */
}
    <span class="item">focus</span>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search