Remove css formatting from ::before and ::after selectors-CodePudding

I want to use css to change the style of some text but not the ::before and ::after content that I also want to add. But i cant find a way of doing it. I'm using React if that makes a difference.

The text in my .js file is

<span className="startMonth">£12</span>

My css is:

startMonth {
  text-decoration: line-through ;
  color:red;

}
.startMonth::before {
  text-decoration: none !important ;
  content: "Special Offer ";
  color: red;
}
.startMonth::after {
  text-decoration: none !important ;
  content: " FREE";
}

ie. I want only the £12 to have a line through, but the result is a line through all the text. Any way I can do it without editing the .js.

Thanks.

CodePudding user response：

You could use absolute positioning to prevent children pseudo-elements to inherit parent's text-decoration as shown below:

.startMonth {
  color:red;
  position: relative;
  text-decoration: line-through;
}

.startMonth::before, .startMonth::after {
  position: absolute;
  left: 0;
 }
.startMonth::before {
  top: 100%;
  content: "Special Offer ";
}
.startMonth::after {
  top: 200%;
  content: " FREE";
}

<p >£12</p>

A cleaner way is to use a container for your text:

.startMonth {
  text-decoration: line-through;
  color:red;
}

.container::before {
  content: "Special Offer ";
}
.container::after {
  content: " FREE";
}

<div >
  <p >£12</p>
</div>

CodePudding user response：

You can do something like this to change the view without editing anything from JS

.startMonth {
    color: red;
    text-decoration: line-through;
    padding-left: 81px;
    position: "relative"
}
.startMonth::before {
    content: "Special Offer";
    color: green;
    position: absolute;
    left: 0;
}
.startMonth::after {
    content: "FREE";
    color: green;
    position: absolute;
    left: 116px;
}

Here is a JSFiddle example