html - Line that goes from end of text to end of block on middle of height -


i have headings , want add line goes end of text in heading end of heading block. line should in middle of line height.

something

+---------------+ | text ----| +---------------+ 

a pseudo-element ideal that:

h1 {    overflow: hidden;    position: relative;  }  h1::after {    content: "";    position: absolute;    top: 50%;    width: 100%;    height: 2px;    transform: translatey(-50%);    margin-left: .25em;    background-color: red;  }
<h1>some text</h1>

modern version (using flexbox instead of positioning)

h1 {    overflow: hidden;    display: flex;    align-items: center;  }  h1::after {    content: "";    flex: 1;    height: 2px;    margin-left: .25em;    background-color: red;  }
<h1>some text</h1>


Comments

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

How to get the ip address of VM and use it to configure SSH connection dynamically in Ansible -

javascript - Get parameter of GET request -