Bağlantı vurgusunda madde işaretlerini genişletme

Question 1

Vurgulu olmadan önce sözde öğeyi genişleten bir bağlantı kurmaya çalışıyorum.

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

Ancak geçiş oldukça garip ve noktalar alttan atlıyor gibi görünüyor. Nasıl düzleştirilir ve soldan genişlemiş gibi görünür?

Keman https://jsfiddle.net/1u0tzxfg/

Güncelleme

İşte biraz daha iyi bir geçiş:

.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

Sadece ekle: white-space: nowrap; to the.açık bağlantı::etiketten önce.

<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

Sadece ekle: white-space: nowrap; to the.açık bağlantı::etiketten önce.

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

Bağlantı vurgusunda madde işaretlerini genişletme

Soru

En iyi cevabı

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride