How to make horizontal line with words in the middle using CSS?
CSS provides the feature of making a horizontal line including words or image in the middle of the webpage to make it attractive. This can be achieved by using simple CSS properties.
Syntax:
h4:before, h4:after { content: ""; flex: 1 1; border-bottom: 2px solid #000; margin: auto; }
Example-1: To make a horizontal line with words in middle
< html > < head > < style > h4 { display: flex; flex-direction: row; } h4:before, h4:after { content: ""; flex: 1 1; border-bottom: 2px solid #000; margin: auto; } img { height: 100px; width: 100px; border-radius: 50%; } </ style > </ head > < body > < h4 >w3wiki</ h4 > </ body > </ html > |
Output :
Example-2: To make a horizontal line with the image in middle
< html > < head > < style > h1 { display: flex; flex-direction: row; } h1:before, h1:after { content: ""; flex: 1 1; border-bottom: 2px solid #000; margin: auto; } img { height: 100px; width: 100px; border-radius: 50%; } </ style > </ head > < body > < h1 >< img src = </ h1 > </ body > </ html > |
Output: