John Dorsey John Dorsey - 5 months ago 15
CSS Question

Create background right of heading

I am trying to convert PSD to HTML/CSS template.

I wanted to put that background to the right of the text but I failed.

Here is my code right now :

<div class="col-md-3">
<div class="block-main">
<div class="block-title">
<h4>SUBSCRIBE NOW</h4>
</div>
</div>
</div>


Button image

Answer

Use a pseudo-element and flexbox

h4 {
  display: flex;
}

h4::after {
  content: '';
  background: repeating-linear-gradient(
  -45deg,
  gray,
  gray 6px,
  black 6px,
  black 12px
    );
  flex:1;
  margin-left: 1em; /* for spacing only */
}
<h4>SUBSCRIBE NOW</h4>

Comments