html - CSS3 リスト遷移: 箇条書きの位置

Question

li要素のあるメニューを作成しました。ときli:hover、リストスタイルの箇条書きをテキストに近づけたいのですが、色も変わります。
(どちらも を使用しているtransitionため、background-image不適切です!) 相対的な配置やマージンの設定など、さまざまな方法をすでに試しましたが、どれも適切に機能しません。解決策はありますか？
（ところで、私の下手な英語でごめんなさい！）

Answer 1

これを試してみてください:

ul { 
    list-style:none;
    margin:0;
    padding:0;
}
ul li:before { 
    content: "\2022";
    opacity:0;
    padding:0 5px 0 10px;
    margin:0;
    transition:opacity 1s;
}
ul li:hover:before {
    opacity:1;
}

@ FK32 で提案されているように、:before疑似クラスを使用して、ユニコード文字を使用して箇条書きをシミュレートできます\2022\。次に、最初にそれopacityを 0 に設定し、ユーザーがリスト項目にカーソルを合わせると、a を適用して不透明度を 1 に変更し、transition:opacity 1sフェードインおよびフェードアウトします。

ユーザーエージェント/カスタムスタイルシートが適用した可能性のあるマージンまたはパディングを削除し、pseudoリストアイテムのコンテンツを箇条書きからより正確に離すことができるようにパディングを追加しました.