user3550879 user3550879 - 5 months ago 11
CSS Question

::before and ::after elements with title

Trying to make bars go on the left and right of my

<h2>
title.



#s-text h2 {
font-size: 2.25em;
font-weight: 700;
color: black;
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;
}

<div id="s-text">
<h2>Title 1</h2>
</div>




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>