如何防止css伪元素从主元素中保留css？

Question

我有一个奇怪的问题，我想在使用css的元素之前和之后添加大括号。由于花括号在html中并不存在，因此我使用css伪元素在前后添加花括号。我的问题是，伪元素正在从主CSS选择器的CSS样式。我不希望花括号有强调，穿透，蓝色等。我怎样才能防止这种情况？

这里是什么错误示例：

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

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

 
amdstyle[type="6"]:after{ 
 
\t content:"}"; 
 
}

<amdstyle type=6>Here is my element</amdstyle>

我认为这将是确定添加text-decoration: none和border-bottom: none的前后伪元素，但是这并不工作，他们总是采取正规元素的造型。将!important添加到我的样式中也无济于事。这怎么解决？

Answer 1

您可以在伪元素上使用absolute位置。

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>

Answer 2

既然你实际应用的样式相同元素的伪类，你真的不能撤消的风格不会改变的元素。但是，您可以伪造它，如下所示：

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

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

 
amdstyle[type="6"]:after{ 
 
\t content:"}"; 
 
position: absolute; 
 
right: -7px; 
 
}

<amdstyle type=6>Here is my element</amdstyle>

Answer 3

使用绝对定位而不是我会去额外<span>的<amdstyle>内。由于每个浏览器都以不同的方式呈现文本，并且您无法知道char需要多少像素，因此这种响应更具响应性。此外，左边的余量将应用于大括号的左侧（而不是H的这里的）。

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>