CODEWITHSUNDEEP
csscss-selectorspseudo-element
jabe
jabe

Reputation: 834

How to prevent a css pseudo element from keeping css from the main element?

I have a weird issue where I want to add curly braces before and after an element using css. Since the curly braces don't really exist in the html, I am using css pseudo elements to add the curly braces before and after. My problem is that the pseudo elements are taking the css style from the main css selector. I don't want the curly braces to have underlines, strike-throughs, blue color, etc. How can I prevent this?

Here is a sample of what is going wrong:

amdstyle[type="6"]{
	margin-left: .5em;
	text-decoration: line-through;
	color: blue;
	font-weight: bold;
	border-bottom: 1px solid blue;
}

amdstyle[type="6"]:before{
	content:"{";
	text-decoration: none !important; /* Doesn't help */
	border-bottom: none !important; /* Doesn't help */
}

amdstyle[type="6"]:after{
	content:"}";
}
<amdstyle type=6>Here is my element</amdstyle>

I thought it would be ok to add text-decoration: none and border-bottom: none to the before and after pseudo elements, but this does not work, they always take the styling of the regular element. Adding !important to my styles doesn't help either. How can this be fixed?

Upvotes: 2

Views: 710

Answers (3)

Marvin
Marvin

Reputation: 10092

Instead of using absolute positioning I would go for an additional <span> inside of the <amdstyle>. This is more responsive as every browser renders text differently and you can't know how many pixels the char takes. In addition, the margin-left will be applied to the left of the brace (not to the H of Here).

amdstyle[type="6"] span {
  text-decoration: line-through;
  color: blue;
  font-weight: bold;
  border-bottom: 1px solid blue;
}

amdstyle[type="6"]:before {
  content:"{";
  margin-left: .5em;
}

amdstyle[type="6"]:after {
  content: "}";
}
<amdstyle type=6><span>Here is my element</span></amdstyle>

Upvotes: 1

Suthan Bala
Suthan Bala

Reputation: 3299

Since you're actually applying the styles to the same element's pseudo class, you can't really undo the styles without altering the element. However, you can fake it as follows:

amdstyle[type="6"]{
	margin-left: .5em;
	text-decoration: line-through;
	color: blue;
	font-weight: bold;
	border-bottom: 1px solid blue;
position: relative;
}

amdstyle[type="6"]:before{
	content:"{";
position: absolute;
left: -7px;
	text-decoration: none !important; /* Doesn't help */
	border-bottom: none !important; /* Doesn't help */
}

amdstyle[type="6"]:after{
	content:"}";
position: absolute;
right: -7px;
}
<amdstyle type=6>Here is my element</amdstyle>

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122047

You can use absolute position on pseudo-elements.

amdstyle[type="6"] {
  margin-left: .5em;
  text-decoration: line-through;
  color: blue;
  font-weight: bold;
  border-bottom: 1px solid blue;
  position: relative;
}

amdstyle[type="6"]:before {
  content:"{ ";
  position: absolute;
  left: -10px;
}

amdstyle[type="6"]:after {
  content: " }";
  position: absolute;
  right: -10px;
}
<amdstyle type=6>Here is my element</amdstyle>

Upvotes: 2

Related Questions