Menu
I wanted to design something as like below image, but not sure how to do!
Title with three dots
So I wanted to display only 3 dots on center below my title. But when I try with dotted border-bottom it takes entire <h1> tag.
h1{ text-align: center; font-size: 50px; color: red; border-bottom: 10px dotted red; }<h1>My Title</h1>
722
The ellipsis ... (/ɪˈlɪpsɪs/, also known informally as dot dot dot) is a series of dots that indicates an intentional omission of a word, sentence, or whole section from a text without altering its original meaning.
The 'kebab' (three vertical dots), which originated in Google's Material Design language, is designed to open a smaller inline menu from a button or other control. The kebab menu, also known as the three-dot menu and the vertical three-dot menu, is an icon used to open a menu with additional options.
To add an ellipsis in the HTML <span> element having the CSS overflow property set to “hidden”, you need to add the text-overflow property. Use its “ellipsis” value, which will add dots at the end of the content within the <span>.
Used ::after pseudo element for that
h1{ text-align: center; font-size: 50px; color: red; line-height: 30px; } h1::after{ content:"..."; font-size: 50px; color: gold; display: block; text-align: center; letter-spacing: 5px; }<h1>My Title</h1>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
