मैं कोशिश कर रहा हूँ एक लिंक बनाने के लिए विस्तार है कि छद्म तत्व से पहले पर जाएँ.
.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>