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.
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
Post a Comment