css - Center Float with ::before and ::after elements -


i want center h3 elements after , before, moment have :

html

<h2>nos réalisations dans la région</h2> 

css

h2 {     font-size: 35px;     font-weight: 300;     margin-top: 0;     color: #fff;     position: relative;     text-transform: uppercase;     float: left; } h2::before {     content: '';     width: 60px;     height: 5px;     background: #248290;     position: absolute;     bottom: -9px;     left: 0; } h2::after {     content: '';     width: 100%;     height: 1px;     background: #248290;     position: absolute;     bottom: -7px;     left: 0; } 

i want center element photo.

![for moment

i want it.

one solution. there more simple. positioning left 50% , subtract half of element width using negative margin.

h2 {      font-size: 35px;      font-weight: 300;      margin-top: 0;      color: #fff;      position: relative;      text-transform: uppercase;      float: left;      background: #333;  }  h2::before {      content: '';      width: 60px;      height: 5px;      background: #248290;      position: absolute;      bottom: -9px;      left: 50%;      margin-left:-30px;  }  h2::after {      content: '';      width: 100%;      height: 1px;      background: #248290;      position: absolute;      bottom: -7px;      left: 0;  }
<h2>nos réalisations dans la région</h2>


Comments

Popular posts from this blog

magento2 - Magento 2 admin grid add filter to collection -

Android volley - avoid multiple requests of the same kind to the server? -

Combining PHP Registration and Login into one class with multiple functions in one PHP file -