如何防止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>