How to add a background color only at the center part of a text? Like a thick strikethrough but only-CodePudding

I want to add a background colour only at the centre part of a text? Like a thick strikethrough but only in the background.

I was very close but I couldn't do it. Please help I'm a beginner! Thank You!

Below is my code:

.home-section-title {
  font-family: 'Alegreya Sans SC', sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: 9px !important;
  font-size: 36px !important;
  color: #000000 !important;
  background-color: #FFF5F3;
  text-align: center;
}

<h3 class=home-section-title>FLASH SALE</h3>

CodePudding user response：

You may use a gradient (repeating if it is to be layed through a few lines) .

possible example (here using em for the demo ) :

body{
font-size:36px;/* demo purpose */
}
.home-section-title {
  font-family: 'Alegreya Sans SC', sans-serif !important;
  font-weight: normal;
  letter-spacing: 0.25em;
  color: #000000;
  background:repeating-linear-gradient(to bottom,transparent 0 0.35em ,#FFF5F3 0.35em 0.85em, transparent 0.85em 1.2em);
  text-align: center;
}

<h1 class=home-section-title>FLASH SALE</h1>
<h1 class=home-section-title>FLASH <br> SALE</h1>
<h2 class=home-section-title>FLASH SALE</h2>
<h2 class=home-section-title>FLASH <br> SALE</h2>
<h3 class=home-section-title>FLASH SALE</h3>
<h3 class=home-section-title>FLASH <br> SALE</h3>

CodePudding user response：

You could use pseudo elements:

.home-section-title {
  font-family: 'Alegreya Sans SC', sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: 9px !important;
  font-size: 36px !important;
  color: #000000 !important;
  text-align: center;
  position: relative;
}

.home-section-title:before {
  content: '';
  height: 18px;
  width: 100%;
  background: #FFF5F3;
  position: absolute;
  left: 0;
  top: 12px;
  z-index: -1;
}

<h3 class=home-section-title>FLASH SALE</h3>

CodePudding user response：

You could use background-color on a pseudoelement befofe insteed. Then give this element the height you desire and place it behind the text. like this:

@import url('https://fonts.googleapis.com/css2?family=Alegreya Sans SC:wght@300&display=swap');

.home-section-title {
    font-family: 'Alegreya Sans SC', sans-serif !important;
    font-weight: 300 !important;
    letter-spacing: 9px !important;
    font-size: 36px !important;
    color:  #000000 !important;
    text-align:center;
    position:relative;
    
}
.home-section-title:before {
  content:'';
  display:block;
  width:100%;
  background-color:#FFF5F3;
  height:10px;
  position:absolute;
  top:15px;
  left:0;
  z-index:-1;
}

<h3 class=home-section-title>FLASH SALE</h3>

CodePudding user response：

Use linear-gradient, note that it only works with background-property not with background-color

.home-section-title {
  font-family: 'Alegreya Sans SC', sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: 9px !important;
  font-size: 36px !important;
  color: #000000 !important;
  background: linear-gradient(to bottom, transparent 0 30%, #FFF5F3 30% 70%, transparent 70% 100%);
  text-align: center;
}

<h3 class=home-section-title>FLASH SALE</h3>