user3550879 user3550879 - 5 months ago 12
CSS Question

before and after elements with title

trying to make bars go on the left and right of my h2 title

html

<h2>Title 1</h2>


css

#s-text h2 {
font-size: 2.25em;
font-weight: 700;
color: #fff;
margin-bottom: 20px; padding: 0;
}

#s-text h2:after {
content: "";
position: absolute;
display: inline-block;
right:0;
height: 10px; width: 30px;
background-color: red;
}

#s-text h2:before {
content: "";
position: absolute;
display: inline-block;
left:0;
height: 10px; width: 30px;
background-color: red;
}

Answer

Is this what you're looking for?

#s-text {
  text-align: center;
}

#s-text h2 {
  font-size: 2.25em;
  font-weight: 700;
  color: black;
  position: relative;
  margin-bottom: 20px; padding: 0;
  display: inline-block;
}

#s-text h2:after {
  right:-1em;
}

#s-text h2:before {
  left:-1em;
}

#s-text h2:before,
#s-text h2:after {
  content: "";
  position: absolute;
  display: inline-block;
  height: 10px; width: 30px;
  background-color: red;
  top: 50%;
  transform: translateY(-50%);
}
<div id="s-text">
  <h2>what is it</h2>
</div>