확대에 총알 링크를 가져

Question 1

내가 만들려고 노력하는 링크를 확장한 의사소 기 전 에 가져가 수 있습니다.

.open-link::before {
      content: '•';
      position: relative;
      display: inline-block;
      width: 10px;
      transition: width .3s;
      margin-right: 10px;
    }
.open-link:hover::before {
      content: '• • •';
      width: 30px;
 }

<a class="open-link" href="#">Link</a>

그러나 전이는 오히려 이상한 것 같은 점에서 뛰어 하단에 있습니다. 어떻게 그것을 부드럽고처럼 보이게 그들이 확장하는 왼쪽에서?

바이올린 https://jsfiddle.net/1u0tzxfg/

업데이트

여기에 조금 더 나은 전환

.open-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.open-link::before {
    content: '• • •';
    overflow: hidden;
    width: 10px;
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
    margin-right: 10px;
    white-space: nowrap;
}
.open-link:hover::before {
    width: 50px;
}

<a class="open-link" href="#">Link</a>

Question 2

단가 white-space: nowrap; 을 .open-link::하기 전에 태그가 있습니다.

<style>
  .open-link::before {
    content: '•';
    position: relative;
    display: inline-block;
    width: 10px;
    transition: width .3s;
    margin-right: 10px;
    white-space: nowrap;
  }
  
  .open-link:hover::before {
    content: '• • •';
    width: 30px;
  }
</style>

<a class="open-link" href="#">Link</a>

botivegh · Answer 1 · 2021-11-12T09:27:10

단가 white-space: nowrap; 을 .open-link::하기 전에 태그가 있습니다.

<style>
  .open-link::before {
    content: '•';
    position: relative;
    display: inline-block;
    width: 10px;
    transition: width .3s;
    margin-right: 10px;
    white-space: nowrap;
  }
  
  .open-link:hover::before {
    content: '• • •';
    width: 30px;
  }
</style>

<a class="open-link" href="#">Link</a>

확대에 총알 링크를 가져

질문

최고의 응답

다른 언어로

이 페이지는 다른 언어로되어 있습니다

이 카테고리에서 인기

인기 있는 질문에 이 카테고리